Javascript “数量”按钮未增加或减少“数量”中的项目；至于；环

我试图通过从HTML页面获得的输入来增加/减少项目的数量。当我尝试单击inc/dec按钮时，它只是增加/减少

for

循环中的第一个元素。例如： 如果我有第一项输入作为1。。。现在我尝试通过inc按钮增加第二项，它将第一项输入从1-->2更改为2，使第一项数量为2，而我的第二项保持不变为1。。如果我点击第三个或第四个项目，同样会继续

这是我的

html

页面中的部分代码

{% for item in order.get_cart_items %}
                <tr>
                  <th scope="row" class="border-0">
                    <div class="p-2">
                      <img src="{{item.product.product_img.url}}" alt="" width="70" class="img-fluid rounded shadow-sm">
                      <div class="ml-3 d-inline-block align-middle">
                        <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block align-middle">{{ item.product.name }}</a></h5><span class="text-muted font-weight-normal font-italic d-block">Category: {{ item.product.product_type }}</span>
                      </div>
                    </div>
                  </th>
                  <td class="border-0 align-middle"><strong>Rs.{{ item.product.price}}</strong></td>
                  <td class="border-0 align-middle"><strong><form>
                    <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
                    <input type="number" id="number" value="1" />
                    <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
                  </form></strong></td>
                  <td class="border-0 align-middle"><a href="{% url 'delete-item' item.id %}" class="text-dark"><i class="fa fa-trash"></i></a></td>               
                </tr>
{% endfor %}
.
.
.
<script>
                  function increaseValue() {
                  var value = parseInt(document.getElementById('number').value, 10);
                  value = isNaN(value) ? 1 : value;
                  value++;
                  document.getElementById('number').value = value;
                }

                function decreaseValue() {
                  var value = parseInt(document.getElementById('number').value, 10);
                  value = isNaN(value) ? 1 : value;
                  value < 2 ? value = 2 : '';
                  value--;
                  document.getElementById('number').value = value;
                }
</script>

{%用于订单中的项目。获取\u购物车\u项目%}
类别：{item.product.product_type}
Rs.{{item.product.price}

-
+

{%endfor%}
.
.
.
函数increaseValue（）{
var value=parseInt（document.getElementById（'number'）。值，10）；
值=isNaN（值）？1：值；
值++；
document.getElementById（'number'）。value=value；
}
函数decreaseValue（）{
var value=parseInt（document.getElementById（'number'）。值，10）；
值=isNaN（值）？1：值；
值<2？值=2:“”；
价值--；
document.getElementById（'number'）。value=value；
}

最终，元素的id必须是唯一的。尤其是在JavaScript中执行

getElementById（）

调用时

您需要同时更改服务器端

foreach

循环和客户端

increaseValue（）

/

decreseValue（）

函数

您需要以这种方式更改它们：在foreach循环中分配一个唯一的id，将id作为参数传递给

increaseValue（）

/

decreseValue（）

函数，然后更新这些函数以使用传递的参数。请注意，下面我们需要一个索引，我称之为

{I}

，用于使您的

id

唯一。这需要在

foreach

循环的每次迭代中递增

因此，在您的foreach中，（特别感谢@Sanjay的代码改进更新）

对两个功能都进行此更改。两者的变化基本相同，因此，我只列出一个

---

现在，您的JavaScript将处理给定给它的特定

id

。

在foreach循环中有这样的代码：

。然后，您的函数将修改

document.getElementById（'number'）。value

。你不能在多个元素上使用同一个id，因为JavaScript不知道你要修改哪个id。那么我现在该怎么办？？有什么想法吗。。？？我可以通过类名引用元素吗…？当然，只要你理解并同意（id必须是唯一的），我会快速给出一个答案…可以通过getElementsByClassName（'Number'）做同样的事情…我相信类名可以是唯一的。Sanjay：我发布了一个答案。我真的不知道您在服务器端使用的是什么语言，所以，我对语法进行了一些猜测。我想你会得到我想要的身份证的。是的，谢谢你的逻辑人。我在Django模板中尝试了相同的逻辑。但它并没有像预期的那样起作用。我在

div

tag和

id=“number{{forloop.counter}}”中做了以下更改
onclick=“increaseValue（number{{{forloop.counter}}）”
input

tag。检查元素时，它是这样显示的：

onclick=“decreaseValue（number1）”

id=“number1”

..

onclick=“decreaseValue（number2）”

id=“number2”

onclick=“decreaseValue（number3）”`id=“number3”…id值被正确获取，但脚本不起作用。这起作用-->

onclick=“increaseValue（{{forloop.counter}}）”

和

id=“number{{{{forloop.counter}}”

它只是将循环计数值传递给id arguementexcellet

forloop.counter

正是我要找的！太好了，这看起来很棒。我用你的代码建议更新了上面的代码，还为你@Sanjay的代码改进增加了荣誉。让我知道这个答案是否准备好起飞！=）只需对编号{{forloop.counter}}-->

{{forloop.counter}}

进行此更改。仅适用于djangotemplate@Sanjay：完成！看起来我忘了正确定义数字输入id，但是，是的，很好，谢谢！

{% for item in order.get_cart_items %}
    ...
        <div class="value-button" id="decrease" onclick="decreaseValue({forloop.counter})" value="Decrease Value">-</div>
        <input type="number" id="{forloop.counter}" value="1" />
        <div class="value-button" id="increase" onclick="increaseValue({forloop.counter})" value="Increase Value">+</div>
    ...
{% endfor %}

function increaseValue(id) {
      var value = parseInt(document.getElementById(id).value, 10);
      value = isNaN(value) ? 1 : value;
      value++;
      document.getElementById(id).value = value;
}