Question

我有各种按钮和各种模态我希望每个按钮打开他的模态但我的javascript不起作用！你能帮助我吗？

var modal = document.getElementsByName('ccc');


var btn = document.getElementsByName("myBtn");
var i;

for (i = 0; i < modal.length; i++) {    
    btn[i].onclick = function() {
    modal[i].style.display = "block";
    }

}

如果我用这种方式写它就可以了：

btn[5].onclick = function() {
    modal[5].style.display = "block";
}

似乎这个功能似乎没有得到正确的选择..

现在它可以工作，但它不再关闭了：

for (let i = 0; i < modal.length; i++) {    
    btn[i].onclick = function() {
   modal[i].style.display = "block";
   }

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

// When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
    if (event.target == modal[i]) {
            modal[i].style.display = "none";
        }
    }

}

Answer 1

除了使用let而不是var使用异步代码之外，您不希望每次迭代运行时都将监听器分配给窗口。相反，在循环外部分配一个一次的侦听器，并检查event.target是否为modal。

此外，首先将modal转换为数组，因此您可以在其上使用数组方法：

modal = [...document.getElementsByName('ccc')]; for (let i = 0; i < modal.length; i++) { btn[i].onclick = function() { modal[i].style.display = "block"; } span.onclick = function() { modal[i].style.display = "none"; } } window.onclick = function(event) { if (modal.includes(event.target)) { event.target.style.display = "none"; } }

每个按钮打开一个模态

1 个答案: