Question

在stackoverflow社区的帮助下，我已经能够将一些代码调整为+/-按钮，并且最小和最小。最大限制为1＆amp; 10.除非我将多个产品添加到我的测试Opencart网站的购物车中，否则一切似乎都没问题。第一个输入字段工作正常，但所有后面的+/-按钮仅调整第一个。您可以在演示中看到我的意思，我复制了html块以说明我遇到的问题 - 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

document.getElementById（“quantity”）将找到具有该ID的第一个元素。

您正在为每个输入使用该ID。所以它只会影响第一个。仅使用ID一次。

Answer 2

您使用了很多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>

DEMO：

+ / - 带孩子的数量框

2 个答案: