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

Question

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

非缓存(工作):

http://jsfiddle.net/g5tvZ/

缓存(不工作):

http://jsfiddle.net/uMe2p/

(代码应该自动滑动图像并能够使用下一个/上一个按钮进行导航。请忽略顶部额外的 varrotate; 。我也将不胜感激任何其他重构有关代码的提示。)

Answer 1

这个:

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

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

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