Question

如何遍历具有5个元素的数组。我有5个元素，如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 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，et-al是我需要显示/隐藏元素的块。

顺便说一句，这段代码总是隐藏所有的单元格块，并显示我的代码中不存在的cell6。我的意思是$("#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?

Answer 2

你可以把它弄清楚：

var ids =
[ 
    "#imgone",
    "#imgtwo",
    "#imgthree",
    "#imgfour",
    "#imgfive"
]; 
$(ids.join(,)).each(function(i){
    $(this).click(function(){
        $("#cell1,#cell2,#cell3,#cell4,#cell5").hide(); 
        $("#cell" + (i+1)).show();
    });
});

通过Id调用它们来循环数组元素

2 个答案: