jQuery цикл плагин для цикла

Question

Я был в замешательстве, пытаясь выяснить, как интегрировать простой цикл for для работы с плагином jQuery Cycle. В моем базовом примере я пытаюсь создать 15 функций цикла, используя jquery .hover() и .cycle().

for(i=1;i<15;i++){
    $(".t"+ i).hover(function() {
        $('.projectTitle').cycle(i);
    });
}

Если я создаю 15 отдельных функций (см. Ниже), скрипт работает нормально, но мне нужно упростить мой код.

$('.t1').hover(function() {
    $('.projectTitle').cycle(1);
});
$('.t2').hover(function() {
    $('.projectTitle').cycle(2);
});
$('.t3').hover(function() {
    $('.projectTitle').cycle(3);
});
$('.t4').hover(function() {
    $('.projectTitle').cycle(4);
});
...

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете обойти всю проблему закрытия, сохранив i в качестве атрибута данных в самом элементе DOM:

for (var i=1; i<=15; i++) {
    $('.t'+i).data("inc",i).hover(function() { 
        $('.projectTitle').cycle( $(this).data("inc") ); 
    });
}

(Кстати, вам, вероятно, следует заменить все эти классы на идентификаторы для повышения производительности.)

«Правильный» способ сделать это с помощью закрытия JavaScript, в котором я не специалист, но я думаю, что должно выглядеть так:

for (var i=1; i<=15; i++) {
    $('.t'+i).hover(
        (function() { 
            var a = i;
            return function() { $('.projectTitle').cycle( a ); }
        })()
    );
}

Answer 2

Если они находятся в правильном порядке в DOM, вы можете использовать индекс, предоставленный каждым из jQuery, и присвоить им одинаковый класс:

$('.t').each(function(index) { 
    $(this).mouseover( function() { // Use mouseover instead of hover, otherwise your function will be run on mouseover AND mouseout
        $('.projectTitle').cycle( index ); 
    }
});