时间戳

首页 > 解决方案 > 在 django 模板 forloop 中使用时在 javascript 中选择按钮

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

问题描述

我有 html 表格

<tbody>
    {% for item in cartitems %}
      <tr>
        <th scope="row">{{forloop.counter}}</th>
        <td>{{item.name}}</td>
        <td id="counter">
        <button id='minusButton'  class="btn btn-default btn-xs">
        <i class="fas fa-minus mr-2"></i>
        </button>
        1
        <button id='plusButton' class="btn btn-default btn-xs">
        <i class="fas fa-plus ml-2"></i>
        </button>
        </td>
        <td>{{item.price}}</td>
      </tr>
    {% endfor %}
</tbody>

我想通过单击加号，减号按钮来增加和减少第二个 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 文本

标签： javascripthtml

解决方案

好主意苏珊让我帮你解决你的问题。解决此问题的最佳方法是创建自定义 Django Widget。我们将编辑/创建 4 个文件，然后这个小部件也将可供您项目的其余部分使用。

HTML（加减号.html）：

<input
    type="number"
    name="{{ widget.name }}"
    class="form-control quantity-number"
    value="{{ widget.value }}"
    min="1"
    max="10"
    {% include "django/forms/widgets/attrs.html" %} />
<button
    type="button"
    class="btn btn-primary"
    data-types="minus"
    data-field="{{ widget.name }}">
    -
</button>
<button
    type="button"
    class="btn btn-default btn-number btn-plus"
    data-type="plus"
    data-field="{{ widget.name }}">
    +
</button>

JavaScript（加减号.js）：

$(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);

        }

CSS（加减号.css）

.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;
}

项目目录/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 中为最常见的场景创建了许多预定义的小部件。您可以继续阅读有关小部件的官方文档。请在您的项目中实施该解决方案，以便我可以帮助您解决您可能遇到的任何问题。

推荐阅读