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