如何让 JavaScript 为模式生成 n 个 var 按钮答案

【问题标题】：How to have JavaScript generate n number of var buttons for modals如何让 JavaScript 为模式生成 n 个 var 按钮
【发布时间】：2021-03-14 00:18:04
【问题描述】：

如果我在这里误用了某些术语，请原谅我； JavaScript 超出了我的常规工作领域。

我有一个 Flask 应用程序，其中路由生成正确的数据库查询，将 n 个条目传递到页面。在 Jinja 代码中，我将每个条目的 device.DTxProgramName 字段变成了一个按钮，该按钮打开了一个模态框。但是，我遇到的问题是只有 device.DTxProgramName 按钮的第一个实例打开了一个模式框。其他所有按钮都不执行任何操作。

在一些测试中，我明确定义了两个按钮并明确定义了两个 var btn 和 var modal，我能够得到我想要的效果。但是，这需要对这些信息进行硬编码，这不是我可以采取的方法。

有更多 JavaScript 经验的人能否建议我可以采取哪些步骤来创建每个 device.DTxProgramName 按钮正常工作所需的变量？

{% extends "layout.html"%}
{% block content %}
    {% for device in devices %}
        <article class="media device">
            <div class="media-body">
              <button id="DeviceButton" class="btn">{{ device.DTxProgramName }}</button>
              <div id="DeviceModal" class="modal">

                <!-- Modal content -->
                <div class="modal-content">
                  <p>{{device.DTxProgramName}}</p>
                  <span class="close"></span>
                </div>            
              </div>
            </div>
        </article>
    {% endfor %}
    <script>
        // Get the modal
        var modal = document.getElementById("DeviceModal");
        
        // Get the button that opens the modal
        var btn = document.getElementById("DeviceButton");
        
        // 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 anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
            modal.style.display = "none";
            }
        }
    </script>
{% endblock content %}

【问题讨论】：

标签： javascript flask jinja2

【解决方案1】：

我使用了一种引用方法来使活动模态选择动态化。这里发生的是 JS 为所有 button 点击分配一个函数，并根据 data-modal 值单独选择模式。您只需确保data-modal 与子模态元素的id 相同，并且它们对于每个设备都是唯一的。

还更改了隐藏模式功能。使用== 将仅在单击模态时触发关闭。改为!==。

{% extends "layout.html"%}
{% block content %}
{% for device in devices %}
    <article class="media device">
        <div class="media-body">
          <button data-modal="deviceModal1" class="deviceModals btn">{{ device.DTxProgramName }}</button>
          <div id="deviceModal1" class="modal">

            <!-- Modal content -->
            <div class="modal-content">
              <p>{{device.DTxProgramName}}</p>
              <span class="close"></span>
            </div>            
          </div>
        </div>
    </article>
{% endfor %}
<script>
  // Get the buttons that open the modal ...
  var btns = document.getElementByClassName("deviceModals"),
      activeModal;
    
  // ... and assign each button a function when the user clicks the button, open the modal 
  for (let i = 0;i<btns.length;i++){
    let btn = btns[i];
    btn.onclick = function() {
      // Get the modal
      let activeModal= document.getElementById(btn.dataset.modal);
      activeModal.style.display = "block";
    }
  }
    
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target !== activeModal) {
      activeModal.style.display = "none";
    }
  }
</script>
{% endblock content %}

【讨论】：