Question

感谢阅读！

我目前正在编辑要与WooCommerce一起使用的代码段，我想在输入字段的两侧放置-/ +按钮以控制排序（使操作更加容易）。

我可以使用它，但是当前代码编辑所有数量字段。有没有办法可以只编辑与按钮位于同一父容器中的字段？

请注意： 我不能轻易更改输入字段的HTML，它是由WooCommerce生成的。

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

Answer 1

您可以使用.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);
        }
    });
});

顺便说一句，在-（减号）代码中，如果值是0，则将最小值设置为1。这是您的意图吗？如果您不希望它为负数，则可以将其更改为：

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

Answer 2

您可以使用.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);
    }
  });
});

使用按钮

2 个答案: