Question

我正在开展一个个人项目，以帮助我更好地理解JavaScript和jQuery。目前我正在我的项目的商店部分工作，并碰壁。

我试图让我的按钮相互增加和减少输入，但它只更新第一个输入字段。

UPDATED- HTML：

winner

JS：

<div class="item">
  <div class="panel-body container">
    <h3>Empanada Gallega</h3>
      <p>A savory pie stuffed with Gallicain pork and peppers, onion and oregano.</p>
        <form>
          <div>
            <p class="total-price">$10.50</p>
            <div>
                <input type="button" class="plus-btn plusbtn btn" onclick="plus()">
            </div>

            <input type="text" value="QTY" id="count">

                <div>
                  <input type="button" class="minus-btn btn" onclick="minus()">
                </div>
            </div>
        </form> 
    </div>
</div>

<div class="item">
    <div class="panel-body">
        <h3>Lemon Soda</h3>
            <form>
                <div>
                    <p class="price">$2.00</p>
                    <div>
                      <input type="button" class="plus-btn plusbtn btn" onclick="plus()">
                    </div>

                    <input type="text" value="QTY" id="count">

                    <div>
                        <input type="button" class="minus-btn btn" onclick="minus()">
                    </div>
                </div>
            </form> 
        </div>
    </div>

如果有人可以帮我解释一下这对我很有帮助。

更新：对此感到抱歉。忘了添加第二项。

我的目标是与第一项分开递增/递减第二项。

Answer 1

我不确切地知道您想要达到什么目标，但我认为404函数中的if()语句存在问题。它不应该检查计数是否＆gt; 1为了处理。所以看起来应该是这样的：

minus()

Answer 2

此处的问题可能是countEl和count超出了您的职能范围。在每个函数中定义它们。

function plus(){
     countEl = document.getElementById("count");
     count = countEl.value;
     count++;
     countEl.value = count;
 }
 function minus(){
   countEl = document.getElementById("count");
   count = countEl.value;
   if (count > 1) {
     count--;
     countEl.value = count;
  } 
}

还要确保将文本框中的值设置为零或其他

<input type="text" value="0" id="count">

Answer 3

您对所有商品使用相同的全局变量“count”，
所以页面上的每个+ / - 按钮都会影响同一个全局变量，并显示所有项目。

你想要做的是为每个物品存放一个计数器尝试存储单个计数器，每个项目一个。

（在你想出来之后，我建议你尝试存储一个项目数组，每个项目都有自己的计数器，并动态地在html中显示它们，因为这将是一个很好的实现方法，它会帮助你提高你的软件技能ᕕ（ᐛ）ᕗ）

简单的JS / jQuery多个递增和递减按钮

3 个答案: