代码之家 › 专栏 › 技术社区 › Stefan

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

increment button html jquery javascript

Stefan · 技术社区 · 7 年前

我正在从事一个个人项目,以帮助我更好地理解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">$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>

JS公司:

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

如果有人能帮我解释一下,那将非常有帮助。

更新: 很抱歉造成混淆。忘记添加第二项。

我的目标是分别增加/减少第一项和第二项。

3 回复 | 直到 7 年前

JoeCodeFrog 7 年前

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

您要做的是为每个对象存储一个计数器。
尝试存储单个计数器,每个项目一个计数器。

(在你弄明白这一点之后,我建议你尝试存储一个项目数组,每个项目都有自己的计数器,并在html中动态显示它们,因为这将是一种很好的实现方法,它将帮助你提高软件技能。)

Skorejen 7 年前

我不知道你到底想实现什么,但我认为你的 if() 中的声明 minus() 作用不应检查计数是否大于;1以便处理。所以应该是这样的:

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

Sanchit Anand 7 年前

这里的问题可能是 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">