Question

所以我在Flask中使用Jinja2模板来渲染HTML文档。我通过一个名为＆＃34; healthy_alerts＆＃34;进入Jinja模板。 dict片段看起来像这样（敏感值被操纵）：

healthy_alerts = {
    ...
    "52.NE": {
        "appliance_id": 123456, 
        "severity": "green", 
        "ip": "x.x.x.x", 
        "hostname": "HG-EDGE-FranceAntony-ECV01", 
        "serial": "11-11-11-11-11", 
        "critical_alarms": 0
    }, 
    "6.NE": {
        "appliance_id": 7891011, 
        "severity": "green", 
        "ip": "y.y.y.y", 
        "hostname": "HG-EDGE-Schiltach-ECV01", 
        "serial": "22-22-22-22-22", 
        "critical_alarms": 0
    }
}

这是一段代码：

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

似乎一切都在那里，但唯一的问题是当我点击任何模态按钮时，它总是向我显示相同的条目（＆＃34; 6.NE＆＃34;）。

当我在Chrome中检查页面时，我可以看到正在为所有模态填充正确的信息。但是，正如您从以下chrome输出中看到的那样，当我点击模态按钮时，无论如何，它仍然始终显示相同的信息（＆＃34; 6.NE＆＃34;条目）。

我认为这可能是一些微不足道的JavaScript问题，但我不是JavaScript编码器。

Answer 1

我不熟悉Jinja，但基于JavaScript代码我会说这是因为你没有正确地确定你的变量，所以它们被视为全局变量。变量string test = "Malayalam"; char[] palindrome = test.ToCharArray(); char[] reversestring = new char[palindrome.Count()]; for (int i = palindrome.Count() - 1; i >= 0; i--) { reversestring[palindrome.Count() - 1 - i] = palindrome[i]; } string materializedString = new string(reversestring); if (materializedString.ToLower() == test.ToLower()) { Console.Write("Palindrome!"); } else { Console.Write("Not a Palindrome!"); } Console.Read();，modal和button未在函数中声明，因此尽管使用span，它们仍将被视为全局变量。即使您的每个var标记都是独立的，它们仍然共享相同的全局变量。只有<script>这是一个问题，因为它在事件处理程序中使用，并将引用分配给modal的最后一个值。

如果您将该脚本代码包装在IIFE中，那么您应该没问题：

modal

如果您不熟悉IIFE：

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

JavaScript CSS Modal无法显示正确的信息

1 个答案: