Присвоение переменной набору оболочек в jQuery не заставляет код работать

#javascript #jquery #variables #jquery-selectors

#javascript #jquery #переменные #jquery-селекторы

Вопрос:

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

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

http://jsfiddle.net/g5tvZ/

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

http://jsfiddle.net/uMe2p/

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

Ответ №1:

Это:

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

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

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

1. Если это так, как мне кэшировать этот селектор? Или, если бы я просто кэшировал $(‘#img-grp-wrap .img-wrap img) в imgFirst , как мне отфильтровать его с помощью :first-child . Разрешено ли это: imgFirst:first-child.append() (и т.д.) ?

2. Неважно, я понял, что могу использовать imgFirst.filter(:first-child) . Спасибо, что указали на проблему.

3. @cat: вам придется кэшировать каждый из элементов изображения в его собственной $() оболочке и вручную отслеживать, какой из них является первым. Вероятно, не стоит усилий только для слайд-шоу. Вы можете попробовать кэширование var $wrap = $('#img-grp-wrap .img-wrap') и выполнить $wrap.find('img:first-child') , чтобы получить первое.

4. Да, это то, что я сделал (см. Мой ответ). Я использовал filter. Сейчас работает. Спасибо.

Ответ №2:

Я хотел бы указать на еще одну проблему, с которой вы сталкиваетесь в своем коде. Здесь вам нужно убрать var from перед rotate присваиванием, чтобы вы присваивали той же глобальной переменной, которая отслеживает ваш таймер. var Перед ним находится локальная переменная, и при повторном нажатии на кнопки prev или next (что можно сделать) будет накапливаться несколько таймеров. Так что измените это:

 $('#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);
});