Частичная замена url

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
Подскажите возможно ли сделать изменение ссылки частичной при помощи jquery?

К примеру есть две колонки с кнопками

ссылка 1.1     ссылка 2.1
ссылка 1.2     ссылка 2.2
ссылка 1.3     ссылка 2.3

и есть href и вот возможно ли при нажатии на ссылку в левой колонки то запись была постоянно с левой стороны и справа соответственно справа
к примеру я нажал на ссылки ссылка 1.1 и ссылка 2.2

href="ссылка 1.1ссылка 2.2"

или я решил изменить правую только часть и нажал на ссылка 2.3 и получаю вот такой вид

href="ссылка 1.1ссылка 2.3"

Ну и тд. Как возможно это реализовать?

#2

Не понял что на что менять, но для ссылок jquery не нужен (и вряд ли поможет).

URL - Web APIs | MDN

let url = new URL('https://example.com#abc')
url.hash = 'hello'
console.log(url.toString())
#3

а если сначала нажали на кнопку во второй колонке?
или просто нажали кнопку во второй колонке, а в первой вообще не нажимали, какой должен быть href?
а если ни одной кнопки не нажали, какой будет href?

и последнее, а href у какого элемента изменяется? Как я понимаю, внизу есть какой-то элемент

<a href="..." >Перейти по ссылке</a>

Вы опять конструируете что-то странное и загадочное :slight_smile:

как обычно - множеством разных способов. Главное, понять, что Вам конкретно нужно.

#4

ссылка будет значит только то что нажали по второй ссылке

значит будет пустой

Постараюсь расписать не много по другому назову не ссылки, а checkbox. В столбце можно выбрать всего один checkbox

checkbox 1.1     checkbox 2.1
checkbox 1.2     checkbox 2.2
checkbox 1.3     checkbox 2.3

к примеру нажимаем на checkbox 1.1 образуется ссылка такого вида

href="ссылка 1.1"

или нажимаем на checkbox 2.1 то получаем

href="ссылка 2.1"

А если мы нажали на checkbox 1.1 и при этом checkbox 2.1 то получаем

href="ссылка 1.1ссылка 2.1"

ну а к примеру я захотел заменить первую часть ссылки и нажал на checkbox 1.3 и при этом checkbox 2.1 остался выбранным то получаю вот такой вид

href="ссылка 1.3ссылка 2.1"

ну и конечно если я к примеру меняю вторую часть ссылки и выбираю заместо checkbox 2.1 такой checkbox 2.2

href="ссылка 1.3ссылка 2.2"

Если я какой то checkbox убираю то та половина ссылки так же убирается в соответствии какому checkbox`у относится ссылка левой или правой колонки

Возможно ли так как то сделать или нет?

#5

А в ссылках что именно?

Причем тут частичная замена, если в этом примере просто склеивание двух строк?

#6

Будет определенный путь

Частичная замена при том что если я перебираю checkbox в левом столбце то ссылка должна меняться и точно так же с правым столбцом. Если я выбираю checkbox’ы и с левого столбца и с правого то они склеиваются, но при переборе checkbox’ов с левой стороны заменяется только часть ссылки. Значение checkbox’а с левой стороны должен всегда писаться в начале, а с правой стороны в конце

#7

не понимаю как правильно объединить строки

<script>
$('div.div_checkbox > :checkbox').on('click', function() {
  var checkbox = $(this);
  var name = checkbox.prop('name');
  if (checkbox.is(':checked')) {
    $(':checkbox[name="' + name + '"]').not($(this)).prop({
      'checked': false,
      'required': false
    });
$('#test').val($(this).val()); 
  }
});
</script>

<div class="div_checkbox">
<input type='checkbox' class='class_checkbox' name='checkbox1' value='checkbox 1.1'>
<input type='checkbox' class='class_checkbox_2' name='checkbox2' value='checkbox 2.1'>
<br>
<input type='checkbox' class='class_checkbox' name='checkbox1' value='checkbox 1.2'>
<input type='checkbox' class='class_checkbox_2' name='checkbox2' value='checkbox 2.2'>
<br>
<input type='checkbox' class='class_checkbox' name='checkbox1' value='checkbox 1.3'>
<input type='checkbox' class='class_checkbox_2' name='checkbox2' value='checkbox 2.3'>
</div>

<input type="text" id="test">
#9

Проще не заменять, а просто при изменении любого чекбокса смотреть что выбрано в обоих столбцах и создавать ссылку.

#10

Вот тут и проблема что я не очень понимаю как это правильно сделать. Можно какой то пример посмотреть где то?

#11

Найти :checked чекбоксы в каждой группе и сложить их значения.
Например, с помощью массива и его функций filter, join.
Array.prototype.filter() - JavaScript | MDN
Array.prototype.join() - JavaScript | MDN
Filter null from an array in JavaScript - Stack Overflow

$('[type=checkbox]').on('click', function() {
  const group1CheckedItems = $('.class_checkbox:checked')
  const group2CheckedItems = $('.class_checkbox_2:checked')
  
  const value = [group1CheckedItems.val(), group2CheckedItems.val()]
  		.filter(v => v)
        .join('')
 

  $('#test').val(value)
})

https://jsfiddle.net/AlexP11223/ztv4Lmbx/11/

Только тут еще можно выбрать сколько угодно чекбоксов в группе (возьмется значения первого).
Как советовал другому любителю чекбоксов, я бы просто использовал радиобаттоны ) Они ж для этого и нужны.

2 лайка