Question

我已经设置了一个我希望在网页上以多种方式使用的功能。

在示例中有两个按钮/触发器。一个触发器是一个类，另一个是id。 OverActivate（类）翻转，应该使.cycle1和.cycle2开始播放。 OverDrive（id）翻转，应该让.cycle3开始播放。

在给定的示例中，该函数被调用三次。它只运行一次。它在一个触发器和另一个触发器之间混淆。

id和类的混合不是问题，我已经测试过了。问题似乎在于这个函数/循环......

function player() {
    int = setInterval(function(){
        id.eq(i % l);
        i++;
        id.hide().eq(i % l).show();
    }, $speed );
}

但我无法弄明白为什么。

非常感谢任何帮助。

小提琴：

http://jsfiddle.net/HRPLS/1/

jQuery代码：

function mh2($id,$trigger,$speed){
    id = $($id), l = id.length, i = 0;
    id.css({ 'display':'none' });
    $($id+':eq(0)').css({ 'display':'inline' });

var int;
function player() {
    int = setInterval(function(){
        id.eq(i % l); i++; id.hide().eq(i % l).show(); },
        $speed );
    }

$($trigger).mouseenter(function(){
    clearInterval(int);
    player();
}).mouseleave(function(){
    clearInterval(int);
});
}

mh2('.cycle1','.switch',700);
mh2('.cycle2','.switch',500);
mh2('.cycle3','#switch2',300);

示例HTML：

<style>
.switch, #switch2 {
    display:block; padding:10px; color:#fff; background:#888;
}
.switch:hover {
    cursor:pointer; color:#8f8; background:#080;
}
#switch2:hover {
    cursor:pointer; color:#f88; background:#800;
}
.cycle1, .cycle2, .cycle3 {
    border:1px solid #999; max-width:200px; max-height:200px; margin:20px;
}
</style>

<div class="switch">OverActivate</div>

<img src="car1.jpg" class="cycle1">
<img src="car2.jpg" class="cycle1">
<img src="car3.jpg" class="cycle1">
<img src="car4.jpg" class="cycle1">

<img src="tire1.jpg" class="cycle2">
<img src="tire2.jpg" class="cycle2">
<img src="tire3.jpg" class="cycle2">
<img src="tire4.jpg" class="cycle2">

<hr>

<div id="switch2">OverDrive</div>

<img src="bike1.jpg" class="cycle3">
<img src="bike2.jpg" class="cycle3">
<img src="bike3.jpg" class="cycle3">
<img src="bike4.jpg" class="cycle3">

Answer 1

您需要使用id声明变量l，i和var，以便每次调用mh2()都会创建对这些变量的闭包。如果没有这个，它们就是全局变量，它们只包含上次调用mh2()时的值。

function mh2($id, $trigger, $speed) {
    var id = $($id),  l = id.length,  i = 0;
    ...
}

Corrected fiddle

另请参阅：How do JavaScript closures work?

jQuery函数只能工作一次

小提琴：

jQuery代码：

示例HTML：

1 个答案: