Зацикливание элементов массива, вызывая их по идентификатору - PullRequest
1 голос
/ 13 февраля 2011

Как мне зациклить массив, который имеет 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(), но не могу понять, что ???

Ответы [ 2 ]

3 голосов
/ 13 февраля 2011

Это проблема закрытия, переменная 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 см. Как работают замыкания в JavaScript?

1 голос
/ 13 февраля 2011

Вы можете указать это:

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