我正在使用以下内容向我的 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);
})
});```
最佳答案
您可以通过在减号中选择此输入来调整脚本以使用类 .qty
来定位特定输入,并根据 的位置添加 click()
事件点击。
$(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>
关于javascript - 使用 jQuery 在 WooCommerce 上增加/减少数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61597661/