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

Question

How do I loop over an Array which has 5 elements. I have 5 elements with ids like 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(); 

    });
}
});

Then I have an 5 a tag elements like

<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 are my blocks that I need to show/hide onclick of a elements.

btw this code always hides all the cell blocks and shows cell6, which does not exist in my code. I mean $("#cell" + (i+1)).show(); never takes values of i as 0, 1 , 2 , 3 or 4.

So how do I iterate over an array and show hide my cells. I think something is wrong with this line of code $(id).click(function() but can't figure out what???

Answer 1

This is a closure issue, the variable i points to the i used in the loop, and at the time of execution it is always 6 .

use this code instead

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

For more on javascript closures see How do JavaScript closures work?

Answer 2

you could jquerify it :

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