2014-05-17 79 views
0

我有點麻煩jQuery通過一組html代碼循環。我寫了一個有條件的腳本,用於檢測圖像是否爲縱向或橫向,併爲其添加類。這個工作孤立地很好,但現在我需要檢測的多個實例在同一頁上...jquery循環使用。每個來檢測寬度和高度

<li> 
<figure class="eventimage"> 
    <img class="" src="images/home1.jpg"> 
</figure> 
<div> 
    some other code that is not important 
</div> 
</li> 
<li> 
<figure class="eventimage"> 
    <img class="" src="images/home2.jpg"> 
</figure> 
<div> 
    some other code that is not important 
</div> 
</li> 
<li> 
<figure class="eventimage"> 
    <img class="" src="images/home3.jpg"> 
</figure> 
<div> 
    some other code that is not important 
</div> 
</li> 
<li> 
<figure class="eventimage"> 
    <img class="" src="images/home4.jpg"> 
</figure> 
<div> 
    some other code that is not important 
</div> 
</li> 

因此,我認爲它走。每個方法的優點...

$(".eventimage img").each(function() { 
    if (.width() > .height()){ 
     //it's a landscape 
     $(this).addClass("landscape"); 
    } else if (.width() < .height()){ 
     //it's a portrait 
     $(this).addClass("portrait"); 
    } else { 
     $(this).addClass("canttell"); 
    } 
}); 

我問題是每個img標籤輸出完全相同的結果,我的測試圖像是景觀和肖像的好混合,所以有些東西是不對的。

任何人都可以幫忙嗎?

+0

' (.width()<.height()){' - ehh,'.width()'不是以元素開頭的? – tymeJV

+1

無法使用'.width()'和'.height()'而無需使用上下文。什麼元素的寬度和高度? – JJJ

+0

我不認爲JS會立即知道圖像的大小,因爲它需要不同的時間來加載圖像。這篇文章介紹瞭如何使用onload事件。 http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript(不是接受的答案,但與356 upvotes之一) – Dave

回答

1

而不是每個循環的,我會使用onload事件,使圖片先下載:

$(".eventimage img").onload = function() { 
    var width = this.width; 
    var height = this.height; 
     if (width > height){ 
     //it's a landscape 
     $(this).addClass("landscape"); 
    } else if (width < height){ 
     //it's a portrait 
     $(this).addClass("portrait"); 
    } else { 
     $(this).addClass("canttell"); 
    } 
} 

編輯:

在某些情況下,我的示例代碼可能太簡單了,可能需要預先加載JS中的圖像。要使用此方法的圖像可能需要先預裝,然後通過做這樣的事情讓他們的大小:

var GetImageSize = function(src, callback) { 
    this.src = src; 
    this.callback = callback; 
    this.image = new Image(); 
    this.requestImageSize() 
}; 

這裏是別人的如何做到這一點例如:

http://jsfiddle.net/peterbenoit/MWVLY/

+0

天才,謝謝戴夫。我只是一個老式的印刷設計師,試圖擴大我的知識面。 JS是下一級,我決心學習,所以謝謝你花時間回答我的問題,並讓我的一天變得更好。 – user3648221

+0

真的很酷你給我一個更好的解決方案戴夫。下次我創建一個腳本時,應該讓我有點更加全面的思考。乾杯。 – user3648221

+0

謝謝,我沒有進行過很好的測試,所以它可能需要一些語法調整。希望它有效。 – Dave

1

我想你忘了提及的.width() jQuery對象infornt和.height()

$(".eventimage img").each(function() { 
    if ($(this).width() > $(this).height()){ 
     //it's a landscape 
     $(this).addClass("landscape"); 
    } else if ($(this).width() < $(this).height()){ 
     //it's a portrait 
     $(this).addClass("portrait"); 
    } else { 
     $(this).addClass("canttell"); 
    } 
}); 

我以爲你是試圖找到width和圖像的height。所以在他們面前增加了$(this)

+0

啊是的,當然。 – user3648221

0

按照你的邏輯,你的代碼更改爲:

$(".eventimage img").each(function(index, element) { 
    if ($(element).width() > $(element).height()){ 
     //it's a landscape 
     $(element).addClass("landscape"); 
    } else if ($(element).width() < $(element).height()){ 
     //it's a portrait 
     $(element).addClass("portrait"); 
    } else { 
     $(element).addClass("canttell"); 
    } 
}); 

請參閱的jquery.each()文檔:http://api.jquery.com/jquery.each/

+0

童慎。我謝謝你。這明確地解決了這個問題。 – user3648221