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

回答

相關問題