Назначение переменной для набора оберток в jQuery не делает код работающим

Question

Я пытаюсь кэшировать или назначить свой селектор $('#img-grp-wrap .img-wrap img:first-child') переменной, потому что я много раз использовал его в коде и продолжал повторяться. Но по какой-то причине, когда я присвоил свой выбор переменной, код больше не работает. Пожалуйста, смотрите ниже (1-й работает, 2-й не работает):

Некэшированный (рабочий):

http://jsfiddle.net/g5tvZ/

Кэшируется (не работает):

http://jsfiddle.net/uMe2p/

(Код должен автоматически скользить по изображениям и иметь возможность использовать кнопки перехода / предыдущий для навигации. Пожалуйста, игнорируйте лишние var rotate; сверху. Я также буду признателен за любые другие советы по рефакторингу кода.) 1015 *

Answer 1

Я хотел бы указать на еще одну проблему, связанную с вашим кодом. Вам необходимо удалить var перед назначением rotate, чтобы назначить ту же глобальную переменную, которая отслеживает ваш таймер. С 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);
});

Answer 2

Это:

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

оставляет набор элементов DOM (вместе с упаковкой jQuery) в imgFirst. Ваш imgFirst будет соответствовать состоянию DOM при назначении значения imgFirst.

Затем вы изменяете DOM, чтобы :first-child не выбирал тот же элемент, к которому он привык, и в imgFirst вы ошиблись. В основном DOM меняется, но ваш imgFirst не отслеживает эти изменения.