javascript onclick事件，在数量产品中添加+1和-1

Question

我尝试用Jquery编写一些代码，当我单击

+

按钮时，字段数量增加，当我按

-

按钮时，数量减少，并且它有效

但是当我按下另一种颜色和尺寸时，字段不再跳跃+1，而是+2

但是，这个方法对我来说还是不起作用。有人可以帮忙吗？谢谢你。

$('#partQuantity').on('click', "#plus" + data[k].Id, function(event) {
  event.preventDefault();
  var quantityInput = document.getElementById('qua' + data[k].SkuSizeId); // Assuming 'SkuSizeId' is the correct property

  if (quantityInput) {
    var currentValue = parseInt(quantityInput.value) || 1;

    if (currentValue < data[k].OnHand) {
      quantityInput.value = currentValue + 1;
    }
  }
});

$('#partQuantity').on('click', "#minus" + data[k].Id, function(event) {
  event.preventDefault();

  var quantityInput = document.getElementById('qua' + data[k].SkuSizeId); // Assuming 'SkuSizeId' is the correct property

  var currentValue = parseInt(quantityInput.value);
  if (currentValue > 1) {
    quantityInput.value = currentValue - 1;
  }

});

Answer 1

我猜它会加倍，因为你的事件处理程序的绑定方式（也许它触发了两次？）

在 jQuery 中，您可以链接方法，这可以减少重复执行某些操作。您还可以使用类来处理选择器，而不是尝试跟踪显式 id。

$('#partQuantity')
  .on('click', '.plus', function() {})
  .on('click', '.minus', function() {});

话虽这么说，这里是另一种方法的粗略示例，您可以将 +/- 显示限制在 1 和可用数量之间：

$('.qty')
  .on('click', '[data-adjust]', function() {
    let qty = {
      adjust: parseInt(this.dataset.adjust),
      cur: parseInt($('.qty [data-constraint="cur"]').text()),
      max: parseInt($('.qty [data-constraint="max"]').text())
    };

    $('.qty .display').text(Math.min(Math.max(1, qty.cur + qty.adjust), qty.max));
  });;

.qty{
align-items: center;
display: grid;
grid-template-columns: 2rem 4rem 2rem;
user-select: none;}

.qty div{
align-items: center;
border: 1px solid gray;
display: flex;
height: 2rem;
justify-content: center;
text-align: center;}

.qty [data-adjust]{
cursor: pointer;}

.qty .available{
border: none;
grid-column: span 3;}

<div class="qty">
  <div data-adjust="-1"><span>-</span></div>
  <div class="display" data-constraint="cur"><span>1<span></div>
  <div data-adjust="1"><span>+</span></div>  
  <div class="available"><span data-constraint="max">7</span><span>available</span></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>