在 django for 循环中访问元素答案

【问题标题】：Accessing an element in django for loop在 django for 循环中访问元素
【发布时间】：2016-02-12 02:42:07
【问题描述】：

我有一个带有以下代码的 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。

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

【问题讨论】：

标签： javascript python django

【解决方案1】：

为 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 %}

【讨论】：

距离发布同样的内容还有 5 秒的时间。你赢了。另外，也许你可以补充一点，给几个元素提供相同的 id 是被禁止的，永远不应该这样做。
@spectras，我添加了一条关于 id 的注释。感谢您的评论。
工作就像一个魅力，谢谢！我知道非唯一 ID 是个坏主意（无论语言/平台和问题如何），但这样做是为了解释我想要做什么。
你打败了我，干得好。但是h 可能是一个 django 模型，它很可能会呈现为一个相当大的字符串......甚至可以在其中包含引号。所以，这很幸运。
或者，使用{{ forloop.counter }} 作为数字后缀。

【解决方案2】：

这实际上可以通过将this 传递给my_func 来更简单地完成，例如：

onclick='my_func(this);'

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

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

但这当然只在您希望按钮隐藏自己时才有效。如果你想让它隐藏其他东西，那么使用不同的 id 是一种方式......

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

【讨论】：