Как заставить работать стилизованный input type=number?

Question

[Александр Токмаков]

Есть код:
https://codepen.io/calliko/details/WNvwQBv

При нажатии + - меняются цифры в обоих полях. Как реализовать изменение цифр по отдельности?
Просто таких полей будет разное количество и каждому прописывать id или отдельный class не вариант.

Answer 1

[Тигран Абрамян]

$(function() {

    (function quantityProducts() {
        $(".quantity-arrow-minus").click(quantityMinus);
        $(".quantity-arrow-plus").click(quantityPlus);
      
        function quantityMinus() {
            let currentInput = $(this).parent().find('.quantity-num');

            if (currentInput.val() > 0) {
                currentInput.val(+currentInput.val() - 1);
            }
        }

        function quantityPlus() {
          let currentInput = $(this).parent().find('.quantity-num');

          currentInput.val(+currentInput.val() + 1);
        }
    })();

});

или

$(".quantity-block").each(function() {
  let currentInput = $(this).children('.quantity-num');

  $(this).children('.quantity-arrow-minus').click(function() {
    if (currentInput.val() > 0) {
      currentInput.val(+currentInput.val() - 1);
    }
  });

  $(this).children('.quantity-arrow-plus').click(function() {
    currentInput.val(+currentInput.val() + 1);
  });
});

Answer 2

[Шохрух Шаймардонов]

Вам и не надо каждому класс задавать. Напишите функцию так, чтобы он работал с сиблингами. Да и оберните каждый такой инпут в блок контейнер/обертку.

Comments

[Александр Токмаков]

то есть с этой версткой работать не будут симбилдинги?

[Шохрух Шаймардонов]

Александр Токмаков, будут, но уж слишком костыльное будет регение. Смотрите на ваш инпут как на независимый компонент. Так и читабельнее, и проще написать