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

Posted 2023-02-24

【中文标题】弹出模型未在 for 循环中打开 (HTML)

【英文标题】：Popup-model is not opening in for loop (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 时，模型甚至没有在循环之外打开

【参考方案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 %