javascript - jQuery 循环插件 For Loop

Question

我一直在努力弄清楚如何集成一个简单的 for 循环以与 jQuery Cycle 插件一起工作。在我的基本示例中，我尝试使用 jquery .hover() 和 .cycle() 创建 15 个循环函数。

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

(顺便说一句，为了性能，您可能应该用 ID 替换所有这些类。)

执行此操作的“正确”方法是使用 JavaScript 闭包，我不是这方面的专家，但我认为应该如下所示:

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