javascript - 使用按钮更改同一父容器中输入字段中的数字

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

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 
}