在Javascript中循环模态数组

我在循环以下函数时遇到问题。 当为每个1,2,3更改i='x'时，它会起作用。。。但是，当尝试循环“i”时，它会变得无响应。我觉得我明显错过了什么

var i=1;
var modal = [];
var btn = [];
var span = [];
//for(i=1;i<5;i++)
//{
modal[i]= document.getElementById('challenge'+i+'Modal');
btn[i] =document.getElementById("challenge"+i);
span[i] = document.getElementById('challenge'+i+'Close');


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

span[i].onclick = function() {
  modal[i].style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal[i]) {
    modal[i].style.display = "none";
  }
}
//}

var i=1；
var模态=[]；
var btn=[]；
var span=[]；
//对于（i=1；i感谢@epascarello提供的指针，以下是解决方案：

var i;
var modal = [];
var btn = [];
var span = [];

function open(i) {
    return function() {
      modal[i].style.display = "block";
    }
}
function closex(i) {
    return function() {
      modal[i].style.display = "none";
    }
}
function close(i) {
    return function(event) {
      if (event.target == modal[i]) {
        modal[i].style.display = "none";
      }
    }
}

for(i=1;i<3;i++)
{
    modal[i]= document.getElementById('challenge'+i+'Modal');
    btn[i] =document.getElementById("challenge"+i);
    span[i] = document.getElementById('challenge'+i+'Close');

    // When the user clicks the button, open the modal 
    btn[i].onclick = open(i);

    // When the user clicks on <span> (x), close the modal
    span[i].onclick = closex(i);
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = close(i);
}

vari；
var模态=[]；
var btn=[]；
var span=[]；
功能开放（一）{
返回函数（）{
模态[i].style.display=“块”；
}
}
函数closex（i）{
返回函数（）{
模态[i].style.display=“无”；
}
}
功能关闭（一）{
返回功能（事件）{
if（event.target==modal[i]）{
模态[i].style.display=“无”；
}
}
}
对于（i=1；i您在数组中只定义了1个项，如果您从0到5定义了5，那么您就可以在我看到一个臭名昭著的for循环问题时工作。并且您一直在覆盖窗口。单击…为什么
modal
，
btn
和
span
需要是数组？@Alex我有一个挑战网格，每个都有一个对应的modal，btn和
span@epascarello谢谢，我来看看！