使用 jQuery 在 WooCommerce 上增加/减少数量答案

【问题标题】：Increment / Decrement quantity number on WooCommerce using jQuery使用 jQuery 在 WooCommerce 上增加/减少数量
【发布时间】：2020-08-19 04:47:59
【问题描述】：

我正在使用以下内容将 + 和 - 按钮添加到我的 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);
  })
});```

【问题讨论】：

按 id 而不是类选择。可能你所有的数量输入都有.qty类
@EvikGhazarian ID 有什么帮助？它们将具有相同的 ID，或者如果它们各自具有不同的 ID，我将如何在 jQuery 中实现它以仅在单击后执行该特定 ID？
"quantity5432" 此 id 是否遵循任何模式？如果不。您可以将数据属性添加到输入。喜欢data-name。
他们不能有相同的 id。 ID 必须是唯一的

标签： javascript html jquery woocommerce

【解决方案1】：

您可以通过在减号中选择此输入并根据点击位置添加 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>

【讨论】：

完美。愿上帝保佑你。
@JohnSmith 谢谢，很高兴我能提供帮助。