将变量分配给 jQuery 中的包装器集不会使代码工作

Posted 2023-03-05

【中文标题】将变量分配给 jQuery 中的包装器集不会使代码工作

【英文标题】：Assigning a variable to a wrapper set in jQuery doesn't make the code work

【发布时间】：2011-11-28 04:16:14

【问题描述】：

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

非缓存（工作）：

http://jsfiddle.net/g5tvZ/

缓存（不工作）：

http://jsfiddle.net/uMe2p/

（代码应该自动在图像中滑动并能够使用下一个/上一个按钮进行导航。请忽略顶部额外的var rotate;。我也将感谢有关代码的任何其他重构提示。）

【参考方案1】：

我想指出您的代码存在的另一个问题。您需要从此处的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);
);

【讨论】：

是的，我在我正在使用的代码中删除了它。我想我在复制计时器时忘记删除它了。

【参考方案2】：

这个：

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

在imgFirst 中留下一组 DOM 元素（连同 jQuery 包装）。当您将值分配给 imgFirst 时，您的 imgFirst 将匹配 DOM 的状态。

然后您更改 DOM，以便 :first-child 不会选择与以前相同的元素，并且您在 imgFirst 中留下了错误的东西。基本上，DOM 会发生变化，但您的 imgFirst 不会跟踪这些变化。

【讨论】：

如果是这种情况，我如何缓存该选择器？或者，如果我只是将 $('#img-grp-wrap .img-wrap img) 缓存到 imgFirst，我如何使用 :first-child 对其进行过滤。这是否允许：imgFirst:first-child.append() （等）？

没关系，我意识到我可以使用 imgFirst.filter(:first-child)。感谢您指出问题。

@cat：您必须将每个图像元素缓存在其自己的$() 包装器中，并手动跟踪哪个是第一个。可能不值得仅仅为了幻灯片而付出努力。您可以尝试缓存 var $wrap = $('#img-grp-wrap .img-wrap') 并执行 $wrap.find('img:first-child') 以获取第一个。

是的，我就是这么做的（见我的回复）。我用过滤器。现在工作。谢谢。