jQuery函数只工作一次

我已经设置了一个功能，我想在网页周围以多种方式使用它

本例中有两个按钮/触发器。一个触发器是类，另一个是id。 过度激活（类）翻转应使.cycle1和.cycle2开始播放。 超速档（id）翻转应使.cycle3开始播放

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

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

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

但我不明白为什么

任何帮助都将不胜感激

小提琴：

jQuery代码： HTML示例：

.开关#开关2{
显示：块；填充：10px；颜色：#fff；背景：#888；
}
.开关：悬停{
光标：指针；颜色：#8f8；背景：#080；
}
#开关2：悬停{
光标：指针；颜色：#f88；背景：#800；
}
.cycle1、.cycle2、.cycle3{
边框：1px实心#999；最大宽度：200px；最大高度：200px；边距：20px；
}
过度活跃

超速档

您需要用

var

声明变量

id

、

l

和

i

，这样每次调用

mh2（）

都会对这些变量创建闭包。如果没有这一点，它们是全局变量，只包含上次调用

mh2（）

的值

---

另请参见：

您需要使用

var

声明变量

id

、

l

和

i

，以便每次调用

mh2（）

都会对这些变量创建闭包。如果没有这一点，它们是全局变量，只包含上次调用

mh2（）

的值

---

另请参见：

id.eq（i%l）

不起任何作用。它返回一个jQuery集合，但不处理它们。您在哪里设置变量

i

和

id

？对不起，我不太熟悉这里的速记排版。i和id在开始时定义。函数mh2（$id，$trigger，$speed）{id=$（$id），l=id.length，i=0；它工作得很好，所有函数都可以运行，但一组图像只能运行一次。

id.eq（i%l）

什么都不做。它返回一个jQuery集合，但对它们不做任何操作。那么在哪里设置变量

i

和

id

？对不起，这里的速记排版不太熟练。i和id在开始时就定义了。函数mh2（$id，$trigger，$speed）{id=$（$id），l=id.length，i=0；它工作得很好，所有功能都正常，但一组图像只有一次。Excellant。非常感谢，这让我抓狂。如果我理解正确，使用var将其本地化。完美。Excellant。非常感谢，这让我抓狂。如果我理解正确，使用var将其本地化。完美。

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

<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">

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