彈出模型未在for回圈（HTML）中打開

我正在嘗試為每個實體打開一個Pop up Model，for loop但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它甚至不適用于一個。

我已經嘗試了很多次，但仍然無法正常作業。任何幫助將非常感激。謝謝你

uj5u.com熱心網友回復：

為模態指定唯一的 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>

uj5u.com熱心網友回復：

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

標籤：javascript html css 姜戈 django-模板

上一篇：在頁面視圖中找不到Django影像，但在發布請求后保存

下一篇：型別錯誤：dict物件不可呼叫（在Thread函式內）