JQuery Lint 说 : "You' ve used the same selector more than once ."I don' t think I have

Question

这是我的问题 child :

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