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 本身。我还根据标题文本为图像分配了“名称”属性。所有这一切都运作良好。

“悬停”是事情变得糟糕的地方。

悬停时没有任何反应，但在鼠标移开时会引发 Lint 错误（在本文的标题中）。

应该发生什么： 首先，我获取悬停图像的名称并将其粘贴到 imgName 中（这是有效的）。 接下来，我得到悬停的 img 的位置，

这是丑陋的东西：我尝试使用“this”中的名称变量（即第一个）来识别图像 $('img.before[name=""]')我们悬停，并将其粘贴在变量“imgBefore”中，然后我尝试对其应用CSS，将其移动到与“after”相同的左侧/顶部位置，但具有不同的z-index。

'img.before[name=""] 似乎是 Lint 抱怨的选择器......它说：

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

所以它正确地使用了变量。它似乎确实在鼠标移出时抛出两次错误。也许“hover()”使用了它两次，但如何避免呢？

Answer 1

这里有很多问题。

• jQuery document.ready 函数将 jQuery 对象作为参数传递，因此您可以在函数内使用 $ 而不必担心冲突。
• 在 img.each 中，您多次重新定义 var f。
• 您在函数中多次从同一个选择器重新创建新的 jQuery 对象。
• 通常认为在每个函数顶部使用 var 一次是很好的形式；这也可以帮助您避免错误的重新声明。
• 您正在创建多个 offset 对象；只需调用一次，然后使用结果对象的成员。
• jQuery 对象返回 self，因此您可以链式调用！这可以让你清理你的代码很多。
• 您正在从现有 jQuery 对象 (imgBefore) 中创建一个新的 jQuery 对象；没有必要这样做。此外，.css() 可以采用对象而不是字符串，这使得更新变得更加容易/干净。

重构：

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)

是多余的。 imgBefore 已经是一个 jQuery 节点集。你可以只使用：

imgBefore.css(css_string);

Answer 3

我在这里看到的第一件事是你的最后一行是错误的：

jQuery(imgBefore).css(css_string);

它应该是：

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);

谢谢大家！