javascript - +/- 数量 带 child 的盒子

Question

在 stackoverflow 社区的帮助下，我已经能够调整一些代码以用作 +/- 按钮，最小和最大限制为 1 和 10。一切似乎都没问题，除非我将多个产品添加到购物车中我的测试 Opencart 网站。第一个输入字段工作正常，但以下所有 +/- 按钮仅调整第一个。您可以在演示中看到我的意思，我复制了 html block 来说明我遇到的问题 - http://jsfiddle.net/aeuLx9nt/5/

这一定是 javascript 中的某些内容导致的。我不知道从哪里开始，非常感谢任何建议......非常感谢。

这是 JavaScript

$(function(){
$("#quantity").parent().children().css("vertical-align","middle")
});

function btnminus(a){
document.getElementById("quantity").value>a?
document.getElementById("quantity").value--:
document.getElementById("quantity").value=a
}

function btnplus(a){
document.getElementById("quantity").value<a?
document.getElementById("quantity").value++:
document.getElementById("quantity").value=a
}

这是html

<div class="box">    
    <label for="qty"><abbr title="Quantity">Qty</abbr></label>
    <input id="quantity" value="1" />
    <button id="quantity" onclick="btnminus(1)">-</button>
    <button id="quantity" onclick="btnplus(10);$(this).prev().val(~~$(this).prev().val()+1);$(this).parents('form');">+</button>
</div>
<br />
<div class="box">    
    <label for="qty"><abbr title="Quantity">Qty</abbr></label>
    <input id="quantity" value="1" />
    <button id="quantity" onclick="btnminus(1)">-</button>
    <button id="quantity" onclick="btnplus(10);$(this).prev().val(~~$(this).prev().val()+1);$(this).parents('form');">+</button>
</div>
<br />
<div class="box">    
    <label for="qty"><abbr title="Quantity">Qty</abbr></label>
    <input id="quantity" value="1" />
    <button id="quantity" onclick="btnminus(1)">-</button>
    <button id="quantity" onclick="btnplus(10);$(this).prev().val(~~$(this).prev().val()+1);$(this).parents('form');">+</button>
</div>

Answer 1

您使用了很多ID，这是错误的，ID must be only one for ONE page 。

$(function() {
  $('.box').on('click', '.minus', function () {
    var $quantity = $(this).siblings('.quantity'),
        value     = +$quantity.val();

    if (value > 1) {
      $quantity.val(value - 1);
    }
  });

  $('.box').on('click', '.plus', function () {
    var $quantity = $(this).siblings('.quantity'),
        value     = +$quantity.val();

    if (value < 10) {
      $quantity.val(value + 1);
    }
  });
});


<div class="box">    
  <label for="qty"><abbr title="Quantity">Qty</abbr></label>
  <input value="1" class="quantity" />
  <button class="minus">-</button>
  <button class="plus">+</button>
</div>

演示:

• http://jsfiddle.net/aeuLx9nt/6/
• http://jsbin.com/sibejo/1/