JQuery Lint说:“您多次使用同一个选择器."我不认为我有 [英] JQuery Lint says: "You've used the same selector more than once." I don't think I have

问题描述

这是我有问题的孩子:

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.我还根据标题文本为图像分配了名称"属性.所有这些都运行良好.

Explanation: I'm working with WordPress (so I spell out jQuery). WordPress loads a bunch of images in a gallery (with PHP). Based on some fields for 'title' and the content of the caption, I determine if it's a 'before' or 'after' and assign that class both to a tag that wraps the image, et al and the img itself. I also assign a 'name' attribute to the image, based on the caption text. All this is working well.

悬停"是情况恶化的地方.

The 'hover' is where things go bad.

悬停时什么也没有发生，但是在鼠标移出时抛出Lint错误(在这篇文章的标题中).

When hovering nothing happens, but the Lint error (in the title of this post) is thrown on mouseout.

应该发生什么: 首先，我获得了悬停的图像的名称，并将其粘贴在imgName中(这是可行的). 接下来，我获得了悬停的img的位置

What's supposed to happen: First, I get the name of the hovered image and stick it in imgName (this is working). Next, I get the position of the hovered img

这是丑陋的东西:我尝试使用$('img.before [name ="]')的图像来标识$('img.before [name ="]')的图像，即我们正在徘徊的那个图像，并坚持使用将其放在变量"imgBefore"中，然后尝试将CS​​S应用于CSS，将其移至与"after"相同的左/上位置，但z-index不同.

Here's the ugly stuff: I try to identify the image with $('img.before[name=""]') using the variable of the name from 'this', i.e. the one we're hovering, and stick it in a variable "imgBefore", then I try to apply CSS to it to move it to the same left/top position as the 'after' but with a different z-index.

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

The 'img.before[name=""] seems to be the selector that Lint is complaining about... it says:

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

因此它正确使用了变量.它似乎在mouseout上两次抛出错误.也许'hover()'使用了两次，但是如何避免呢?

So it is using the variable correctly. It does seem to throw the error twice on mouseout. Perhaps the 'hover()' is using it twice, but how can that be avoided?

推荐答案

这里有很多问题.

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

• The jQuery document.ready functions pass the jQuery object as a parameter, so you can use $ inside the function without fear of collision.
• In img.each, you redefine var f multiple times.
• You're recreating new jQuery objects off of the same selector multiple times in your functions.
• It's generally considered good form to use var once per function, at the top of the function; this helps you avoid mistaken redeclarations, as well.
• You are creating multiple offset objects; just call it once, then use the members of the resulting object.
• jQuery objects return self, so you can chain calls! This lets you clean up your code a lot.
• You're creating a new jQuery object out of an existing jQuery object (imgBefore); no need to do that. Additionally, .css() can take an object rather than a string, which makes updates a fair bit easier/cleaner.

重构:

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

这篇关于JQuery Lint说:“您多次使用同一个选择器."我不认为我有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！