问题:使用 jQuery 在 WooCommerce 上增加/减少数量

我正在使用以下内容向我的 WooCommerce 商店添加 + 和 - 按钮。它正在工作,除非单击它会更改购物车中的每个项目数量,而不仅仅是特定产品。我似乎无法解决它。

这是HTML:

<div class="quantity">
<label for="quantity5432">Quantity</label>
<input type="number" id="quantity5432" class="qty" step="1" min="0" name="cart[73d][qty]" value="0">
</div>

<div class="quantity-nav">
<div class="quantity-button add-action add-up">+</div>
<div class="quantity-button add-action add-down">-</div>
</div>

这是jQuery

$(document).ready(function() {
  const minus = $('.add-down');
  const plus = $('.add-up');
  const input = $('.qty');
  minus.click(function(e) {
    e.preventDefault();
    var value = input.val();
    if (value > 1) {
      value--;
    }
    input.val(value);
  });

  plus.click(function(e) {
    e.preventDefault();
    var value = input.val();
    value++;
    input.val(value);
  })
});```

解答

您可以通过在减号中选择此输入并根据单击的位置添加click()事件来调整脚本以使用类.qty来定位特定输入。

$(document).ready(function() {
  const minus = $('.add-down');
  const plus = $('.add-up');
  minus.click(function(e) {
    e.preventDefault();
    const input = $(this).closest(".quantity-nav").prev(".quantity").find(".qty");
    var value = input.val();
    if (value > 1) {
      value--;
    }
    input.val(value);
  });

  plus.click(function(e) {
    e.preventDefault();
    const input = $(this).closest(".quantity-nav").prev(".quantity").find(".qty");
    var value = input.val();
    value++;
    input.val(value);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">
  <label for="quantity5432">Quantity</label>
  <input type="number" id="quantity5432" class="qty" step="1" min="0" name="cart[73d][qty]" value="0">
</div>
<div class="quantity-nav">
  <div class="quantity-button add-action add-up">+</div>
  <div class="quantity-button add-action add-down">-</div>
</div>
<div class="quantity">
  <label for="quantity5433">Quantity</label>
  <input type="number" id="quantity5433" class="qty" step="1" min="0" name="cart[73e][qty]" value="0">
</div>

<div class="quantity-nav">
  <div class="quantity-button add-action add-up">+</div>
  <div class="quantity-button add-action add-down">-</div>
</div>