在django模板forloop中使用时，选择javascript中的按钮

我有一张html格式的表格

{cartitems%中项目的%s}
{{forloop.counter}
{{item.name}
1.
{{item.price}}
{%endfor%}

我想通过点击加号和减号按钮来增加和减少第二个td中的文本，现在是1

我编写了这个javascript，但它只适用于第一个按钮循环

var plusButton = document.getElementById("plusButton")
var minusButton = document.getElementById("minusButton")

let counter = 1;


plusButton.onclick = function(){
  counter ++
  this.parentElement.childNodes[2].nodeValue = counter
}

minusButton.onclick = function(){
  counter --
  this.parentElement.childNodes[2].nodeValue = counter
}

---

我希望所有按钮都能选择并递增和递减各自的td文本

id不能重复<代码>和

。如果for val不是1，则id是重复的。

好主意，Susan，让我帮你解决问题。解决这个问题的最佳方法是创建定制的Django小部件。我们将编辑/创建4个文件，然后这个小部件也将用于您的项目的其余部分

HTML（plusminusnumber.HTML）：

CSS（plusminusnumber.CSS）

Projectdir/appdir/widgets.py：

from django.forms.widgets import Widget

class PlusMinusNumberInput(Widget):
    template_name = 'widgets/plusminusnumber.html'

    class Media:
        css = {
            'all': ('css/plusminusnumber.css',)
        }
        js = ('js/plusminusnumber.js',)

最后，我们向小部件注册了所有静态文件，现在您也可以在项目的其余部分使用它。有关更多详细信息，请查阅官方文件。如果您不了解任何部分，请响应此解决方案。干杯

更新：

---

小部件是一组HTML/JS/CSS规则，可以定义为Jinja模板语言用法。Django中已经为大多数常见场景创建了许多预定义的小部件。您可以继续并通过官方网站了解有关小部件的信息。请在您的项目中实施解决方案，以便我可以帮助您解决任何问题

我应该如何在for循环中增加id以及如何在javascript中选择id，然后您可以将

I

值设置为id和委托事件。例如：plusButton1I我不明白，我可以设置

id=plusbutton{{{forloop.counter}}

，但我如何在javascript中选择该按钮，然后您可以找到所有按钮并为每个按钮设置事件侦听器，或者为按钮的父级接受

onClick

事件并检查

if（e.target==button\u id）

然后运行您的逻辑我对小部件不太了解，您能告诉我应该将上述文件保存在哪里，以及如何在我的工作模板中调用这些文件吗我已经更新了我的答案，以帮助您理解小部件。它对我来说非常有用。感谢@MudassarHashmi的简要解释。非常感谢。：-）非常感谢您的回答。由于您的ans，我了解了widget。请检查

plusminusnumber.js

当我点击+btn时，我发现一个错误，说

Uncaught error:Syntax error，无法识别的表达式：input[name'quantity']

$(function(){
    $('.btn-number').click(function (e){
        e.preventDefault();
        fieldName = $(this).attr('data-field');
        type = $(this).attr('data-type');
        var input = $("input[name'"+ fieldName + "']");
        var currentVal = parseInt(input.val());
        if (type == 'minus') {
        if (currentVal > input.attr('min')){
        input
            .val(currentVal - 1)
            .change();
        }
        if (parseInt(input.val())== input.attr('min')){
            $(this).attr('disabled', true);

        }

.quantity-number {
    -moz-appearance:text-field;
}
.quantity-number:: -webkit-inner-spin-button,
.quantity-number:: -webkit-outer-spin-button {
    -webkit-appearance:none;
    -moz-appearance:none;
    margin:0;
}

from django.forms.widgets import Widget

class PlusMinusNumberInput(Widget):
    template_name = 'widgets/plusminusnumber.html'

    class Media:
        css = {
            'all': ('css/plusminusnumber.css',)
        }
        js = ('js/plusminusnumber.js',)