通過由Id調用它們來遍歷數組元素

Question

如何遍歷包含5個元素的數組。我有5個元素，像imgone，imgtwo，imgree，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，小區2，ET-人是我的塊，我需要顯示/隱藏的onclick一個元件。

btw此代碼始終隱藏所有單元格塊並顯示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

你可以jquerify它：

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(); 
    }); 
});