2

这是我的问题孩子：

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 以将其移动到与“之后”相同的左侧/顶部位置，但具有不同的 z-index。

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

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

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

4

4 回答 4

7

这里有很多问题。

  • jQuerydocument.ready函数将 jQuery 对象作为参数传递，因此您可以$在函数内部使用而不必担心冲突。
  • 在img.each中，您重新定义var f了多次。
  • 您在函数中多次使用同一个选择器重新创建新的 jQuery 对象。
  • var在函数的顶部，每个函数使用一次通常被认为是一种很好的形式；这也可以帮助您避免错误的重新声明。
  • 您正在创建多个offset对象；只需调用一次，然后使用结果对象的成员。
  • jQuery 对象 return 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
    });
  });
});
于 2010-12-30T00:33:10.497 回答
1

错误信息可能具有误导性：。我看到的问题是：

jQuery(imgBefore)

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

imgBefore.css(css_string);
于 2010-12-30T00:28:23.673 回答
1

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

jQuery(imgBefore).css(css_string);

它应该是： 

imgBefore.css(css_string);
于 2010-12-30T00:34:18.550 回答
0

我们昨晚深夜找到了解决办法。正如 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);

谢谢你们！

于 2010-12-31T04:29:32.690 回答