jQuery函数只影响3个图像中的一个img

这是我之前询问的一个问题的后续，但现在大多数情况下工作，该功能采取3个图像的第一个，因为它参考addClass()而不是跟随if/else。任何想法为什么？jQuery函数只影响3个图像中的一个img

图片1 & 3 =景观 - 正确添加.heightDefine

图片2 =人像 - 错误还加入.heightDefine代替.widthDefine

jQuery.fn.galDisplay = function() { 
    var galSingleImgH = this.height(); 
    var galSingleImgW = this.width(); 
    if(galSingleImgW > galSingleImgH){ 
     this.addClass('heightDefine'); 
    } else if(galSingleImgW < galSingleImgH){ 
     this.addClass('widthDefine'); 
    } 
} 
jQuery('.notFirst img').galDisplay();

来源

2013-02-26 ggdx

这不是一个if-else，它是一个if-else if。其中一个陈述必须是真实的，否则将不会发生。如果它是一个if-else，那么至少有一个语句会被执行。 – lifetimes 2013-02-26 13:01:43

您是否尝试过调试？ 'galSingleImgW'和'galSingleImgH'的值是什么？ – 2013-02-26 13:02:06

你错过了这个案子galSingleImgW = galSingleImgH – Jason 2013-02-26 13:07:48

jQuery将真正给你匹配元素的集合，所以this是收藏，不是一个结果。

为了解决这个问题，采用迭代each收集：

jQuery.fn.galDisplay = function() { 
    this.each(function() { 
     var $self = $(this); 
     var galSingleImgH = $self.height(); 
     var galSingleImgW = $self.width(); 
     alert(galSingleImgW + ' ' + galSingleImgH); 
     if(galSingleImgW > galSingleImgH){ 
      $self.addClass('heightDefine'); 
     } else if(galSingleImgW < galSingleImgH){ 
      $self.addClass('widthDefine'); 
     } 
     // else it is square! 
    }); 
} 
jQuery('.notFirst img').galDisplay();

我想补充的唯一的另一件事是，如果你是靠工作了图像的大小，你不想运行此直到图像被加载。

来源

2013-02-26 13:16:36 Fenton

谢谢史蒂夫 - 完美。 – ggdx 2013-02-26 13:20:28

+1给你，特别是获得接受的答案，当它被发布十分钟后休息，不坏:-) ... – adeneo 2013-02-26 13:23:43

你对整个集合运行相同的功能，需要在每个元素上运行if/else：

jQuery.fn.galDisplay = function(){ 
    return this.each(function() { 
     var galSingleImgH = $(this).height(), 
      galSingleImgW = $(this).width(); 

     if (galSingleImgW > galSingleImgH) { 
      $(this).addClass('heightDefine'); 
     } else if (galSingleImgW < galSingleImgH) { 
      $(this).addClass('widthDefine'); 
     } 
    }); 
} 

jQuery('.notFirst img').galDisplay();

来源

2013-02-26 13:06:19 adeneo

+1击败我吧。 – Fenton 2013-02-26 13:17:04

尝试

(function($) 
{ 
    $.fn.galDisplay = function(params) 
    { 
     //params = $.extend({minlength: 0, maxlength: 99999}, params); 
     //above code extends options passed 

     this.each(function() 
     { 
      var galSingleImgH = this.height(); 
      var galSingleImgW = this.width(); 
      if(galSingleImgW > galSingleImgH) 
      { 
       this.addClass('heightDefine'); 
      } 
      else if(galSingleImgW < galSingleImgH) 
      { 
       this.addClass('widthDefine'); 
      } 
     }); 
     return this; 
    }; 
})(jQuery);

来源

2013-02-26 13:07:10

jQuery函数只影响3个图像中的一个img

回答

相关问题