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的位置

这是丑陋的东西：我尝试用$（'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对象（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（谢谢！）所指出的那样，是因为...我们还有其他几个步骤来做对。

我们最终得到了这个：

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

谢谢大家！

JQuery Lint说：“你不止一次使用过相同的选择器。”我不认为我有

4 个答案: