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 function pairElement(str) { switch (str) { case "A": console.log("some things") break; case "G": console.log("some more things") break; } } pairElement("ACG");搜索祖先，但是在这种情况下，您正在寻找同级元素。尝试使用closest代替siblings

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

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>

jQuery查找最接近的类并增加价值

3 个答案: