弹出模型未在 for 循环中打开 (HTML)答案

【问题标题】：Popup-model is not opening in for loop (HTML)弹出模型未在 for 循环中打开 (HTML)
【发布时间】：2021-12-09 14:01:19
【问题描述】：

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

模板.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 之外时，它甚至都不起作用。

我已经尝试了很多次，但仍然无法正常工作。任何帮助将非常感激。谢谢你

【问题讨论】：

你不能在循环中使用 id
你的意思是我应该使用class 而不是id 来完成这项工作？
是的，我更喜欢在脚本中使用类和更改
但是当我使用document.getElementByClassName 时，模型甚至没有在循环之外打开

标签： javascript html css django django-templates

【解决方案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>

【讨论】：

【解决方案2】：

id在页面上应该是唯一的，你应该在循环中使用class而不是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 %}

【讨论】：