Изменить номер в поле ввода в том же родительском контейнере с помощью кнопок

Question

Спасибо за чтение!

В настоящее время я редактирую фрагмент кода для использования с WooCommerce, я бы хотел разместить кнопки - / + по обе стороны от поля ввода для управления порядком (сделать это намного проще).

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

Обратите внимание: Я не могу легко изменить HTML-код поля ввода, он генерируется WooCommerce.

CODEPEN:

JQuery:

    $(document).ready(function () {
    $('.qty').prop('disabled', true);
    $(document).on('click', '.plus', function () {
        $('.qty').val(parseInt($('.qty').val()) + 1);
    });
    $(document).on('click', '.minus', function () {
        $('.qty').val(parseInt($('.qty').val()) - 1);
        if ($('.qty').val() == 0) {
            $('.qty').val(1);
        }
    });
});

Внешний интерфейс HTML (много экземпляров на странице, причина редактирования только в пределах одного и того же родителя):

<td class="woocommerce" data-product-id="623">
  <span class="fa fa-minus minus"></span>
  <div class="quantity">
    <label class="screen-reader-text" for="quantity_5c37ca4c2084e">Quantity</label>
    <input type="number" id="quantity_5c37ca4c2084e" class="input-text qty text" step="1" min="0" max="9" name="quantity_623" value="0" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="10 day quantity" disabled="">
  </div>
  <span class="fa fa-plus plus"></span>
</td>

Очень признателен за любую мудрость, заранее спасибо !! <3 </p>

Answer 1

Вы можете использовать метод .closest () , чтобы найти вмещающий родительский элемент и затем найти поле ввода.

$(document).ready(function () {
  $('.qty').prop('disabled', true);
  $(document).on('click', '.plus', function (event) {
    var field = $(event.target).closest('.woocommerce').find('.qty');
    $(field).val(parseInt($('.qty').val()) + 1);
  });
  $(document).on('click', '.minus', function (event) {
    var field = $(event.target).closest('.woocommerce').find('.qty');
    $(field).val(parseInt($('.qty').val()) - 1);
    if ($('.qty').val() == 0) {
        $('.qty').val(1);
    }
  });
});

Answer 2

Вы можете использовать .parent() и .find() и попробовать что-то вроде этого:

$(document).ready(function () {
    $('.qty').prop('disabled', true);
    $(document).on('click', '.plus', function () {
        var qtyElement = $(this).parent().find('.qty');
        var currentQuantity = parseInt(qtyElement.val());
        qtyElement.val(currentQuantity + 1);
    });
    $(document).on('click', '.minus', function () {
        var qtyElement = $(this).parent().find('.qty');
        var currentQuantity = parseInt(qtyElement.val());
        qtyElement.val(currentQuantity - 1);

        if (currentQuantity == 0) {
            qtyElement.val(1);
        }
    });
});

Кстати, в коде - (минус) вы устанавливаете минимальное значение 1, если значение равно 0. Это ваше намерение? Если вы не хотите, чтобы оно было отрицательным, вы можете изменить его на:

if (currentQuantity <= 0) {
    qtyElement.val(0);   // or qtyElement.val(1); if you want minimum of 1 
}