Question

我有一个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。

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

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

Answer 2

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

onclick='my_func(this);'

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

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

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

如果你仍然对整体感到困惑，那么＆＃34;事情..只需在浏览器上查看页面来源，您就会看到模板生成的确切内容。其他一切都发生在浏览器中。浏览器开发者工具在这里是你的朋友..打开它们以便你可以看到你正在获得的任何错误等。如果你想要这样做，你需要使用浏览器的开发者部分，否则你会疯了。

访问django中的元素for循环

2 个答案: