模态框的打开

当你通过循环生成多个具有相同类名的按钮，并且希望每个按钮都能触发对应的模态框时，你不能依赖于类名来唯一识别这些按钮，因为类名不是唯一的。解决这个问题的方法有几种：

1. 使用数据属性: 给每个按钮添加一个唯一的数据属性（如 data-target ），指向它应该触发的模态框的ID。

<button class="modal-button" data-target="modal1">打开模态框1</button>

<button class="modal-button" data-target="modal2">打开模态框2</button>

然后在JavaScript中，你可以这样获取并触发事件：

document.querySelectorAll('.modal-button').forEach(button => {

    button.addEventListener('click', function() {

        var modalId = this.getAttribute('data-target');

        document.getElementById(modalId).style.display = 'block';

    });

});

2. 使用索引: 如果模态框的ID或类名有可预测的模式（例如基于索引），你可以使用按钮的索引来确定应该触发哪个模态框。

document.querySelectorAll('.modal-button').forEach((button, index) => {

    button.addEventListener('click', function() {

        var modalId = 'modal' + (index + 1); // 假设模态框ID是'modal1', 'modal2', ...

        document.getElementById(modalId).style.display = 'block';

    });

});

3. 事件委托: 使用事件委托技术，你可以在父元素上设置监听器，然后根据事件的 target 属性来确定哪个按钮被点击。

// 假设所有按钮都在一个共同的父容器内

document.querySelector('共同的父容器的类名或者ID').addEventListener('click', function(event) {

    if (event.target.classList.contains('modal-button')) { // 确保点击的是按钮

        var modalId = event.target.getAttribute('data-target');

        document.getElementById(modalId).style.display = 'block';

    }

});

4. 为每个按钮单独绑定事件: 如果循环生成按钮的逻辑允许，你可以在生成每个按钮的同时直接绑定事件。

var buttons = document.querySelectorAll('.modal-button');

for (var i = 0; i < buttons.length; i++) {

    var button = buttons[i];

    button.addEventListener('click', function() {

        var modalId = 'modal' + (i + 1); // 根据索引确定模态框ID

        document.getElementById(modalId).style.display = 'block';

    });

}

选择哪种方法取决于你的具体情况和偏好。通常情况下，使用数据属性和事件委托是更灵活和高效的方法。