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

jQuery closest搜索祖先，但在本例中，您要查找兄弟元素。尝试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>

​