将变量赋值给jQuery中的包装器集并不能使代码工作

Assigning a variable to a wrapper set in jQuery doesn't make the code work

本文关键字：并不能 工作 代码 包装 赋值 变量 jQuery      更新时间：2023-09-26

我正在尝试缓存或将我的选择器$('#img-grp-wrap .img-wrap img:first-child')分配给变量，因为我在代码中多次使用它，并且我不断重复自己。但由于某种原因，当我将选择值赋给一个变量时，代码不再工作了。请看下面(第一个工作，第二个不工作):

缓存(工作):

http://jsfiddle.net/g5tvZ/

缓存(不工作):

http://jsfiddle.net/uMe2p/

(代码应该自动滑动图像，并能够使用next/prev按钮进行导航。请忽略顶部额外的var rotate;。我也非常感谢任何关于代码重构的技巧

This:

var imgFirst = $('#img-grp-wrap .img-wrap img:first-child');

在imgFirst中留下一组DOM元素(以及jQuery包装)。当你把你的值赋给imgFirst时，你的imgFirst将匹配DOM的状态。

然后你改变DOM，所以:first-child不选择相同的元素，它曾经和你在imgFirst留下了错误的东西。基本上，DOM变化，但你的imgFirst不跟踪这些变化。

我想指出您的代码的另一个问题。您需要从这里的rotate赋值前删除var，以便您将赋值给跟踪计时器的相同全局变量。var在它前面，它是一个局部变量，当你反复点击上一个或下一个按钮(这是可能发生的)时，你会得到多个计时器堆叠。所以修改这个:

$('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() {
    clearInterval(rotate);
}, function() {
   var rotate = setInterval(function() {
        slideShow();
    }, 4000);
});

: 

$('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() {
    clearInterval(rotate);
}, function() {
    rotate = setInterval(function() {
        slideShow();
    }, 4000);
});
相关文章：