Как при клике на + и - менять ссылку?

Question

Как при клике на + и - менять ссылку?

Рейтинг: 2Ответов: 2Опубликовано: 24.07.2023

Вообще не могу додуматься как сделать такое? у нас есть костыльный магазин и раньше продавали товары поштучно, сейчас же перешли уже на выбор количества. Пока делается нормальный магазин, надо решить эту задачу, а я никак не могу как сделать чтобы при клике на + и - менялся ссылка добавления в корзину? Есть ссылка в карточке товара

<a class="buy_button" href="/addtocart.php?id=387&q=1" rel="nofollow">Добавить в корзину</a>

Сделал в карточке товара инпут

<div class="kolvo">
<span class="minus"></span>
<input type="number" value="1" min="1">
<span class="plus"></span>
</div>

Как мне увеличивать и уменьшать количество в ссылке q= ?, это еще при том что на странице могут быть несколько товаров Код кнопок

$('.minus').click(function () {
        var $input = $(this).parent().find('input');
        var count;
        if($input.hasClass('isdbl')){
            count = parseFloat($input.val()) - parseFloat($input.attr('step'));
            count = count < parseFloat($input.attr('step')) ? parseFloat($input.attr('step')) : count;
        }
        else{
            count = parseInt($input.val()) - 1;
            count = count < 1 ? 1 : count;
        }
        $input.val(count);
        $input.change();
        return false;
    });
    $('.plus').click(function () {
        var $input = $(this).parent().find('input');
        if($input.hasClass('isdbl')){
            $input.val(parseFloat($input.val()) + parseFloat($input.attr('step')));
        }
        else{
            $input.val(parseInt($input.val()) + 1);
        }
        $input.change();
        return false;
    });

javascript jquery

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

UPD:

Как вариант:

var addToCartLink = document.querySelector('.buy_button').getAttribute('href');
var inputElement = document.querySelector('.kolvo input');
var plusButton = document.querySelector('.kolvo .plus');
var minusButton = document.querySelector('.kolvo .minus');

// Функция для обновления ссылки при изменении значения input
function updateLink() {
  var inputValue = inputElement.value;
  var newLink = addToCartLink.replace(/q=\d+/, 'q=' + inputValue);
  document.querySelector('.buy_button').setAttribute('href', newLink);
}

// plus
plusButton.addEventListener('click', function() {
  inputElement.stepUp();
  updateLink();
});

// minus
minusButton.addEventListener('click', function() {
  inputElement.stepDown();
  updateLink();
});

// Обработчик события при изменении значения input
inputElement.addEventListener('change', function() {
  updateLink();
});

<a class="buy_button" href="/addtocart.php?id=387&q=1" rel="nofollow">Добавить в корзину</a>

<div class="kolvo">
<span class="minus">-</span>
<input type="number" value="1" min="1">
<span class="plus">+</span>
</div>

Answer 2

▲ 0

а я никак не могу как сделать чтобы при клике на + и - менялся ссылка добавления в корзину?

Как вариант - поместить значимые элементы в один контейнер и далее отработать по следующему сценарию.

document.addEventListener('click', e => {
  const o = e.target
  if (!o.classList.contains('buy_button')) return
  e.preventDefault()
  const op = o.closest('.cart')
  const v = op.querySelector('input').value
  const url = o.href + '&q=' + v
  console.log(url)
  // делаем переход
  //top.location = url
})

<div class='cart'>
  <a class="buy_button" href="/addtocart.php?id=387" rel="nofollow">Добавить в корзину</a>
  <div class="kolvo">
    <span class="minus"></span>
    <input type="number" value="1" min="1">
    <span class="plus"></span>
  </div>
</div>

Как при клике на + и - менять ссылку?

Ответы