JQuery Lint говорит: «Вы использовали один и тот же селектор более одного раза».Я не думаю, что у меня есть

Question

Вот мой проблемный ребенок:

jQuery(document).ready(function() {
    var a = jQuery('img[title*="after"]');  
    a.parents('dl.gallery-item').addClass('after');
    a.addClass('after');
    var b = jQuery('img[title*="before"]');
    b.parents('dl.gallery-item').addClass('before');
    b.addClass('before');
//the following gives each image a 'name' attribute based on the caption, collapsed.
jQuery('img').each(function() {
    var f = jQuery(this).parents('dl.gallery-item').find('dd').text();
    var f = f.replace(/\s/g,'');
    jQuery(this).attr('name', f);
});
//the following takes each 'name' attribute, finds the before, and sticks it behind the after   
    jQuery('img.after').hover(function() {
        var imgName = jQuery(this).attr('name');
    //  alert(imgName);

        var afterPosition_L = jQuery(this).offset().left;
        var afterPosition_T = jQuery(this).offset().top;
        var css_string = '{ top: '+ afterPosition_T +'; left: '+ afterPosition_L +'; position: absolute; z-index: 999;}';
        var imgBefore = jQuery('img.before[name="'+ imgName +'"]');
    //  alert(imgBefore);
        jQuery(imgBefore).css(css_string);
    });

Объяснение: Я работаю с WordPress (поэтому я изложил jQuery).WordPress загружает кучу изображений в галерею (с PHP).Основываясь на некоторых полях для «заголовка» и содержимого заголовка, я определяю, является ли это «до» или «после», и назначаю этот класс как тегу, который оборачивает изображение, так и другим и самому img.Я также назначаю атрибуту name имя изображения на основе текста заголовка.Все это работает хорошо.

«При наведении» дела идут плохо.

При наведении курсора ничего не происходит, но ошибка Lint (в заголовке этого поста) возникает при наведении мыши.

Что должно произойти: во-первых, я получаю имя скрытого изображения и вставляю его в imgName (это работает).Затем, я получаю положение находящегося img

Вот ужасный материал: я пытаюсь идентифицировать изображение с помощью $ ('img.before [name = ""]'), используя переменную имени из 'this ', то есть тот, который мы наведем, и вставьте его в переменную "imgBefore", затем я пытаюсь применить к нему CSS, чтобы переместить его в ту же левую / верхнюю позицию, что и "after", но с другим z-index.

Кажется, что 'img.before [name = ""] является селектором, на который жалуется Lint ... он говорит:

Selector: "img.before[name="CarterLivingRoom"]"
You've used the same selector more than once.

Так что он использует переменнуюправильно.Похоже, дважды выдает ошибку на mouseout.Возможно, hover () использует его дважды, но как этого избежать?

Answer 1

Здесь много чего не так.

• Функции jQuery document.ready передают объект jQuery в качестве параметра, поэтому вы можете использовать $ внутри функции, не опасаясь столкновения.
• В img.each вы переопределяете var f несколько раз.
• Вы воссоздаете новые объекты jQuery из одного и того же селектора несколько раз в своих функциях.
• Обычно считается правильным использовать var один раз для каждой функции, в верхней части функции; это также поможет вам избежать ошибочных объявлений.
• Вы создаете несколько offset объектов; просто вызовите его один раз, затем используйте члены полученного объекта.
• Объекты jQuery возвращают self, поэтому вы можете связывать вызовы! Это позволяет вам много очищать ваш код.
• Вы создаете новый объект jQuery из существующего объекта jQuery (imgBefore); нет необходимости делать это. Кроме того, .css() может принимать объект, а не строку, что делает обновления более понятными.

Refactored:

jQuery(document).ready(function($) {
  $('img[title*="after"]').addClass('after').
    parents('dl.gallery-item').addClass('after');

  $('img[title*="before"]').addClass('before').
    parents('dl.gallery-item').addClass('before');

  //the following gives each image a 'name' attribute based on the caption, collapsed.
  $('img').each(function() {
    var $this = $(this), f;
    f = $this.parents('dl.gallery-item').find('dd').text().replace(/\s/g, '');
    $this.attr('name', f);
  });

  //the following takes each 'name' attribute, finds the before, and sticks it behind the after
  $('img.after').hover(function() {
    var $this = $(this), offset = $this.offset();
    $('img.before[name="' + $this.attr('name') + '"]').css({
      top: offset.top,
      left: offset.left,
      position: 'absolute',
      'z-index': 999
    });
  });
});

Answer 2

Первое, что я вижу здесь, это то, что ваша последняя строка неверна:

jQuery(imgBefore).css(css_string);

Должно быть:

imgBefore.css(css_string);

Answer 3

Сообщение об ошибке может вводить в заблуждение :. Проблема, которую я вижу, состоит в том, что:

jQuery(imgBefore)

является избыточным. imgBefore уже является набором узлов jQuery. Вы можете просто использовать:

imgBefore.css(css_string);

Answer 4

Мы нашли решение поздно вечером. Одна из проблем, как отметили ifaour и Flaschen (спасибо!), Заключалась в imgBefore ... у нас было еще пара шагов, чтобы исправить это.

Мы закончили с этим:

// the following gives each image a class before or after based on the 'title' field
jQuery(document).ready(function() {
    var a = jQuery('img[title*="after"]');  
    a.parents('dl.gallery-item').addClass('after');
    a.addClass('after');
    var b = jQuery('img[title*="before"]');
    b.parents('dl.gallery-item').addClass('before');
    b.addClass('before');
//the following gives each image a 'name' attribute based on the caption, collapsed.
jQuery('img').each(function() {
    var f = jQuery(this).parents('dl.gallery-item').find('dd').text();
    var f = f.replace(/\s/g,'');
    jQuery(this).attr('name', f);
});
//the following takes each 'name' attribute, finds the before, and sticks it behind the after
    jQuery('img.before').each(function(){
        var imgName = jQuery(this).attr('name');
        var imgAfter = jQuery('img.after[name="' + imgName + '"]');

        var position = imgAfter.position();
//alert(position.top);
        imgAfter.after(this);
      //there was some CSS in the stylesheet, too, providing relative/absolute, etc.
        var css_array = {
            'top' : position.top,
            'left' : position.left,
            'display' : 'block',
        }

        jQuery(this).css(css_array);
    });
// then this fades the front image to the back image.
    jQuery('dl.after').hover(function(){
        jQuery(this).find('img.after').fadeOut(1500);
    }, function(){
        jQuery(this).find('img.after').fadeIn(1000);

Спасибо всем!