我有这个HTML块来控制一个数量：
<div class="cart-product-quantity">
<div class="quantity m-l-5">
<input type="button" class="minus" value="-">
<input type="text" class="qty" value="1">
<input type="button" class="plus" value="+">
</div>
</div>
下面是jQuery代码：
$(document).ready(function(){
$('.qty').prop('disabled', true);
$('.plus').click(function(){
$('.qty').val(parseInt($('.qty').val()) + 1 );
});
$('.minus').click(function(){
$('.qty').val(parseInt($('.qty').val()) - 1 );
if ($('.qty').val() == 0) {
$('.qty').val(1);
}
});
});
我的问题是因为我在很多地方都有HTML,JS代码控制所有的块,而它应该控制选定的块。
请问我怎么换这个？
多谢了。
您需要在click事件处理程序中使用this关键字来引用单击的按钮。从那里，您可以遍历DOM以找到相关的input元素，在下面的示例中，我使用siblings()。
此外，请注意，您可以使用math.max()简化确保值不能小于1的条件。试试看：
null
jQuery($ => {
$('.qty').prop('disabled', true);
$('.plus').click(function() {
$(this).siblings('.qty').val((i, v) => parseInt(v, 10) + 1);
});
$('.minus').click(function() {
$(this).siblings('.qty').val((i, v) => Math.max(1, parseInt(v, 10) - 1));
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cart-product-quantity">
<div class="quantity m-l-5">
<input type="button" class="minus" value="-">
<input type="text" class="qty" value="1">
<input type="button" class="plus" value="+">
</div>
</div>
<div class="cart-product-quantity">
<div class="quantity m-l-5">
<input type="button" class="minus" value="-">
<input type="text" class="qty" value="1">
<input type="button" class="plus" value="+">
</div>
</div>
在.cart-product-quantity>.quantity块上设置事件可以确保事件在正确的位置触发。请查看下面的片段。
null
$(document).ready(function () {
setProductQuantityEvents();
});
function setProductQuantityEvents() {
var $productQuantity = $('.cart-product-quantity>.quantity');
$productQuantity.find('.qty').prop('disabled', true);
$productQuantity.on('click', '.plus', function () {
var $this = $(this),
$quantity = $this.siblings('.qty'),
qty = parseInt($quantity.val()) + 1;
$quantity.val(qty);
}).on('click', '.minus', function () {
var $this = $(this),
$quantity = $this.siblings('.qty'),
qty = parseInt($quantity.val()) - 1;
$quantity.val(qty < 1 ? 1 : qty);
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cart-product-quantity">
<div class="quantity m-l-5">
<input type="button" class="minus" value="-">
<input type="text" class="qty" value="1">
<input type="button" class="plus" value="+">
</div>
</div>
<div class="cart-product-quantity">
<div class="quantity m-l-5">
<input type="button" class="minus" value="-">
<input type="text" class="qty" value="1">
<input type="button" class="plus" value="+">
</div>
</div>
<div class="cart-product-quantity">
<div class="quantity m-l-5">
<input type="button" class="minus" value="-">
<input type="text" class="qty" value="1">
<input type="button" class="plus" value="+">
</div>
</div>