访问django-for循环中的一个元素

Accessing an element in django for loop

本文关键字：一个 元素 django-for 循环 访问      更新时间：2023-09-26

我有一个Django模板，它有以下代码，可以创建多个按钮，并尝试在点击（同一按钮）时删除/隐藏其中一个按钮：

{% for h in helicopters %}
    <div class="btn-group" id="remove-heli">
        <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
            {{ h }}
        </button>
    </div>
{% endfor %}

其中helicopters是字符串列表，稍后在脚本块中我有

function my_func(h) {
    document.getElementById('remove-heli').style.visibility = 'hidden';
    }

该函数运行，但正如您所料，它只在我的for循环的第一个元素上运行，因为for循环中的所有<'div>元素都有相同的id。

我的问题是：有没有办法指向特定的元素？或者，有没有更好的方法可以将按钮并排打印？

为div元素设置不同的id怎么样？

{% for h in helicopters %}
    <div class="btn-group" id="remove-heli-{{ h }}">
        <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
            {{ h }}
        </button>
    </div>
{% endfor %}

然后，您可以使用id访问特定的div元素。

function my_func(h) {
    document.getElementById('remove-heli-' + h).style.visibility = 'hidden';
}

注意

对几个元素使用相同的ID不是一个好主意。使用唯一id。

更新

或者，您可以使用forloop.counter:

{% for h in helicopters %}
    <div class="btn-group" id="remove-heli-{{ forloop.counter }}">
        <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
            {{ h }}
        </button>
    </div>
{% endfor %}

这实际上可以通过将this传递给my_func来实现，例如：

onclick='my_func(this);'

this变量包含触发事件的DOM元素，因此它将是单击的任何按钮。

function my_func(this) {
    this.style.visibility = 'hidden';
}

但这当然只有当你想让按钮隐藏起来时才有效。如果你想让它隐藏其他东西，那么使用不同的id是一种方法。。。

如果你仍然对"什么在哪里跑"这件事感到困惑。。只需在浏览器上执行"查看页面源代码"，您就会准确地看到模板生成的内容。其他一切都发生在浏览器中。浏览器开发工具是您的朋友。。打开它们，这样你就可以看到你遇到的任何错误等等。如果你想做这些事情，你需要使用浏览器的开发人员部分，否则你会发疯的。

相关文章：