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

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

循环的jQuery循环插件

2 个答案: