弹出模型在for循环(HTML)中没有打开

Question

我试图为每个实例打开for loop中的Pop up Model，但pop up model正在为第一个实例打开，但没有为其他实例打开。我在模板循环中使用Django。

template.html

{% for comment in comments %}
<button id="ModelButton">Open Model</button>
<div id="Model" class="flagModel">
<div class="modal-content">
<div class="modal-mod">
<div class="container-fluid">
<form method="post" enctype="multipart/form-data">
{% csrf_token %} 
{{form}}
<input type="submit">
</form>
</div>
</div>
</div>
</div>
<script>
var formModel= document.getElementById("Model");
var formButton = document.getElementById("ModelButton");
formButton .onclick = function () {
formModel.style.display = "block";
}
window.onclick = function (event) {
if (event.target == formModel) {
formModel.style.display = "none";
}
}
</script>
{% endfor %}

当我把JavaScript放在for loop外面时，它甚至不工作。

我试了很多次，但它仍然不工作。任何帮助将是非常感激的。谢谢你

Answer 1

为模态指定唯一的id，并将id号传递给单个函数，以在单击相应的按钮时打开表单模态。

{% for comment in comments %}
<button onclick="openModal({{forloop.counter}})">
Open Model
</button>
<div id="Modal-{{forloop.counter}}" class="flagModel">
<div class="modal-content">
<div class="modal-mod">
<div class="container-fluid">
<form method="post" enctype="multipart/form-data">
{% csrf_token %} 
{{form}}
<input type="submit">
</form>
</div>
</div>
</div>
</div>
{% endfor %}
<script>
function openModal(id) {
var formModal = document.getElementById(`Modal-${id}`);
if (formModal) {
formModal.style.display = "block";
}
}

window.onclick = function (event) {
if (event.target == formModel) {
formModel.style.display = "none";
}
}
</script>

Answer 2

id在页面中应该是唯一的，你应该使用class in循环而不是id，

在这里我已经更新了你的脚本，可能会帮助你

{% for comment in comments %}
<button class="ModelButton">Open Model</button>
<div class="flagModel Model">
<div class="modal-content">
<div class="modal-mod">
<div class="container-fluid">
<form method="post" enctype="multipart/form-data">
{% csrf_token %} 
{{form}}
<input type="submit">
</form>
</div>
</div>
</div>
</div>
<script>
var formButton = document.querySelectorAll(".ModelButton");
formButton.forEach(function(element) {
element.addEventListener('click', function(eventObj) {
var formModel = eventObj.currentTarget.nextElementSibling;
formModel.style.display = "block";
formModel.addEventListener('click', function(event) {
eventObj.currentTarget.style.display = "none";
});
})
});

</script>
{% endfor %}