javascript - 通过 Id 调用来遍历数组元素

Question

如何遍历包含 5 个元素的数组。我有 5 个元素，其 ID 分别为 imgone、imgtwo、imgthree、imgfour、imgfive。

var ids =
[ 
    "#imgone",
    "#imgtwo",
    "#imgthree",
    "#imgfour",
    "#imgfive"
]; 
for (var i = 0; id = ids[i]; i++)
{  
    $(id).click(function() {

        $("#cell1,#cell2,#cell3,#cell4,#cell5").hide(); 
         $("#cell" + (i+1)).show(); 

    });
}
});

然后我有 5 个 a 标签元素，例如

<a href="#"  id="imgone"><img src ="myimage1" /></a>    
<a href="#"  id="imgtwo"><img src ="myimage2" /></a>    
<a href="#"  id="imgthree"><img src ="myimage3" /></a>    
<a href="#"  id="imgfour"><img src ="myimage4" /></a>    
<a href="#"  id="imgfive"><img src ="myimage5" /></a> 

cell1、cell2 等是我需要显示/隐藏元素点击的 block 。

顺便说一句，这段代码总是隐藏所有单元格 block 并显示单元格 6，这在我的代码中不存在。 我的意思是 $("#cell"+ (i+1)).show(); 永远不会将 i 的值设为 0、1、2、3 或 4。

那么我如何遍历数组并显示隐藏我的单元格。我认为这行代码有问题 $(id).click(function() 但不知道是什么？？？

Answer 1

这是一个闭包问题，变量i指向循环中使用的i，执行的时候总是6.

改用这段代码

for (var i = 0; id = ids[i]; i++)
{  
    var fnc = function(j){
        return function() {
            $("#cell1,#cell2,#cell3,#cell4,#cell5").hide(); 
            $("#cell" + (j+1)).show();
        };
    }(i);
    $(id).click(fnc);
}

有关 javascript 闭包的更多信息，请参阅 How do JavaScript closures work?