在 Javascript 中循环一个模态数组答案

【问题标题】：Looping an array of modals in Javascript在 Javascript 中循环一个模态数组
【发布时间】：2019-01-08 14:59:23
【问题描述】：

我在循环以下函数时遇到问题。当为每个 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";
  }
}
//}

【问题讨论】：

您在数组中只定义了 1 个项目，如果您定义 5 从 0 到 5，那么您就可以使用 for
我看到了一个臭名昭著的 for 循环问题。 stackoverflow.com/questions/750486/… 而你一直在覆盖 window.onclick ....
为什么modal、btn和span需要是数组？
@Alex 我有一个挑战网格，每个挑战都有对应的模态、btn 和跨度
@epascarello 谢谢，我去看看！

标签： javascript arrays loops

【解决方案1】：

感谢@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);
}

【讨论】：