JavaScript CSS模式未显示正确的信息

所以我在Flask中使用Jinja2模板来呈现HTML文档。我正在将一个名为“健康提醒”的dict传递到Jinja模板中。dict代码段如下所示（敏感值被操纵）：

这是一段代码片段：

<div id="alarms" align="center">

    {% if healthy_alerts %}
    <div class="healthy_div">
        {% for dev in healthy_alerts %}
                <button class="btn_healthy" id="{{ healthy_alerts.get(dev).get('hostname') }}Btn"></button>


                <div id="{{ healthy_alerts.get(dev).get('hostname') }}Modal" class="modal">
                    <!-- Modal content -->
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <p>{{ healthy_alerts.get(dev) }}</p>
                  </div>
                </div>

                <script>
                    // Get the modal
                    var modal = document.getElementById('{{ healthy_alerts.get(dev).get("hostname") }}Modal');

                    // Get the button that opens the modal
                    var btn = document.getElementById("{{ healthy_alerts.get(dev).get("hostname") }}Btn");

                    // Get the <span> element that closes the modal
                    var span = document.getElementsByClassName("close")[0];

                    // When the user clicks the button, open the modal
                    btn.onclick = function() {
                        modal.style.display = "block";
                    }

                    // When the user clicks on <span> (x), close the modal
                    span.onclick = function() {
                        modal.style.display = "none";
                    }

                    // When the user clicks anywhere outside of the modal, close it
                    window.onclick = function(event) {
                        if (event.target == modal) {
                            modal.style.display = "none";
                        }
                    }
                </script>
            {% endfor %}
        </div>
    {% endif %}
</div>

{%if健康_警报%}
{正常运行的\u警报%中的开发人员的百分比}
&时代；
{{health_alerts.get（dev）}

//获取模态
var modal=document.getElementById（“{{health_alerts.get（dev.get（“hostname”）}}modal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“{{health_alerts.get（dev.get（“主机名”）}}btn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
{%endfor%}
{%endif%}

看起来一切都差不多了，但唯一的问题是当我点击任何一个模式按钮时，它总是显示相同的条目（“6.NE”）

当我在Chrome中查看页面时，我可以看到所有modals都填充了正确的信息。但是，正如您从下面的chrome输出中看到的，当我单击modal按钮时，无论发生什么，它始终显示相同的信息（“6.NE”条目）

我认为这可能是一些无关紧要的JavaScript问题，但我不是JavaScript程序员。

---

我不熟悉Jinja，但基于JavaScript代码，我认为这是因为您没有正确地确定变量的范围，所以它们被视为全局变量。变量

modal

、

按钮

和

span

未在函数中声明，因此尽管使用了

var

，它们仍将被视为全局变量。即使每个

标记是分开的，它们仍然共享相同的全局标记。只有

modal

是一个问题，因为它在事件处理程序中使用，并且将引用分配给

modal

的最后一个值

如果您将脚本代码包装到iLife中，您应该会很好：

(function() {
    // Get the modal
    var modal = document.getElementById('{{ healthy_alerts.get(dev).get("hostname") }}Modal');

    // ...

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
})();

如果您不熟悉IIFEs：

---

请发布您制作的HTML。非常感谢，您完全正确。我很确定这是一个变量范围问题，但我不确定如何解决它。然而，有一件事不起作用，那就是点击“x”按钮或点击模态之外的任何地方似乎都不会关闭模态，页面会被模态卡住。我怀疑这是一个类似的问题，所以我尝试在iLife中包装那些onclick函数，但没有任何效果。我在示例中对代码进行了缩写，但我的意图是让您在单个iLife中包装整个部分。从开始的

到结束的

都应该在该函数中。如果你把每一位都封装在它自己的IIFE中，那么它们都有各自的作用域，并且不能看到彼此的变量。这可以实现，但您需要将所有那些

document.getElementById

行复制到每个需要它们的函数中。

(function() {
    // Get the modal
    var modal = document.getElementById('{{ healthy_alerts.get(dev).get("hostname") }}Modal');

    // ...

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
})();