Javascript 每个按钮打开一个特定的模式

我有各种按钮和各种模式，我希望每个按钮打开他的模式，但我的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";
    }

}

函数似乎没有正确地获取i参数

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

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";
        }
    }

for（设i=0；i

---

}

除了对异步代码使用

let

而不是

var

之外，您不希望每次迭代运行时都为窗口分配侦听器。相反，在循环之外分配一次侦听器，并检查

事件.target

是否为

模式

另外，请先将
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";
  }
}

modal=[…document.getElementsByName（'ccc'）；
for（设i=0；i
在
for
循环中声明
i
，并使用
let
<代码>设i=0

。如果可以避免，请不要使用

var

，

const

和

let

具有块作用域而不是功能作用域，并且不会被提升-更直观。谢谢！现在模态工作！但我还是有个问题，他们再也关不上了！这是完整的代码：您的

span

是什么？是真的只有一个模式，还是每个模式都有一个单独的模式？除非使用

addEventListener

，否则不能将多个

onclick

s指定给元素。每个跨距都是一个x来关闭模式，因此每个模式都有一个跨距

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";
  }
}