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

Question

我正在做一个个人项目，以帮助我更好地理解 JavaScript 和 jQuery。目前，我正在处理我项目的商店部分，并且运行变成了一堵墙。

我试图让我的按钮彼此独立地递增和递减输入，但它只更新第一个输入字段。

更新- HTML:

<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">.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">.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>

JS:

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

如果有人能帮我解释一下，那会很有帮助。

更新：抱歉造成混乱。忘记添加第二项了。

我的目标是 increment/decrement 第二项与第一项分开。

Answer 1

我不知道你到底想实现什么，但我认为你在 minus() 函数中的 if() 语句有问题。它不应该检查是否 count > 1 以进行处理。所以它应该看起来像：

function minus(){
    count--;
    countEl.value = count;
}

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 多个递增和递减按钮

Simple JS/jQuery multiple increment and decrement buttons

html

javascript

jquery

increment

button