jquery查找最接近的类并增加值

Question

我有增加/减少购物车数量的按钮

<div class="product-quantity">
<button class="qtyminus">-</button>
<input type="text" name="quantity" value="1" class="qty form-control">
<button class="qtyplus">+</button>
</div>

不幸的是，我的javascript不起作用，不知道为什么。

$('.qtyplus').on('click', function(e) {
e.preventDefault();
var num = Number($(this).closest('.qty').val());
$(this).closest('.qty').val(++num);
});

Answer 1

jQueryclosest搜索祖先，但在本例中，您要查找的是兄弟元素。尝试siblings而不是closest

顺便说一句，现代浏览器有内置的调试工具。很容易设置断点并逐步遍历代码以查看发生了什么，并使用控制台窗口进行测试。

Answer 2

您应该使用siblings()而不是closest()，因为closest()搜索元素的祖先，而siblings()搜索元素的兄弟。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-quantity">
<button class="qtyminus">-</button>
<input type="text" name="quantity" value="1" class="qty form-control">
<button class="qtyplus">+</button>
</div>
<script>
$('.qtyplus').on('click', function(e) {
e.preventDefault();
var num = Number($(this).siblings('.qty').val());
$(this).siblings('.qty').val(++num);
});
$('.qtyminus').on('click', function(e) {
e.preventDefault();
var num = Number($(this).siblings('.qty').val());
$(this).siblings('.qty').val(--num);
});
</script>

Answer 3

您的问题是因为closest()查找DOM，而.qty是单击按钮的兄弟，因此需要使用siblings()。

还要注意，如果在两个按钮上放置一个公共类并在data属性中提供要添加的值，则可以为它们使用一个单独的事件处理程序。您还可以通过向val()提供一个函数来消除重复选择同一元素的需要，该函数将根据当前值返回新值。试试这个：

$('.amendqty').on('click', function(e) {
e.preventDefault();
var inc = $(this).data('inc');
$(this).siblings('.qty').val(function(i, v) {
return parseInt(v, 10) + inc;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-quantity">
<button class="amendqty" data-inc="-1">-</button>
<input type="text" name="quantity" value="1" class="qty form-control">
<button class="amendqty" data-inc="1">+</button>
</div>