找出圖像是水平的還是垂直的

Question

我有多個圖像，並且想知道每個圖像是水平的還是垂直的，並向它添加一個類，以便我可以相應地設計它。

我試過許多東西，包括像這樣：

if ($(".img").width() > $(".img").height()) { 
$(this).addClass("horizontal"); 
} 

我在做什麼錯？謝謝！

Answer 1

由於$(this)，您的代碼不起作用。 this這裏沒有指向圖像元素，但它指向範圍的最新實例。

試試這將使用jQuery each循環遍歷所有的圖像元素，然後有條件地添加所需的類。

$("img").each(function(){ 
    var $this = $(this); 
    if ($this.width() > $this.height()) { 
     $this.addClass("horizontal"); 
    } 
}); 

如果你有一個類".img"到所有的圖像元素，那麼你可以使用類選擇。

$(".img").each(function(){ 
    var $this = $(this); 
    if ($this.width() > $this.height()) { 
     $this.addClass("horizontal"); 
    } 
}); 

或者，也可以使用jQuery filter方法過濾所有具有寬度大於高度，然後添加所需的類在一次的圖像。

$(".img").filter(function() 
    var $this = $(this); 
    return $this.width() > $this.height(); 
}).addClass("horizontal"); 

.filter() - 減少匹配元素到那些選擇匹配或傳遞函數的測試的。

如果您在頁面加載時執行此操作，請確保您在窗口加載事件中執行此代碼，以確保加載所有圖像。

$(window).load(function(){ 
    $(".img").each(function(){ 
     var $this = $(this); 
     if ($this.width() > $this.height()) { 
      $this.addClass("horizontal"); 
     } 
    }); 
}); 

Answer 2

$（「。img」）.width（）返回一個數組。嘗試限制每個數組中的一個項目或在每個塊中運行代碼。

$（this）不會有圖像的上下文。

$(".img").each(function() { 
if ($(this).width() > $this.height()) { 
    $(this).addClass(".horizontal"); 
} 
}); 

Answer 3

您的圖片有img班嗎？如果沒有，您可以使用$('img')選擇所有圖像。

嘗試.each：

$('img').each(function(){ 
    var t = $(this); // Cache 
    if(t.width()>t.height()){ 
     t.addClass('horizontal'); 
    } else { t.addClass('vertical'); } 
}); 

Answer 4

$(".img")返回與類 「IMG」 元件的陣列。如果你一次只做一個，它就可以工作。

在這裏看到一個例子：http://jsfiddle.net/2nnK2/

Answer 5

如果它不給你的圖像在一個適當的寬度/高度，然後它可能是，它是計算width.height圖像已被加載之前。要做到這一點，你需要做的只是包裝你的代碼$(.'img').load(function(){});這將在圖像加載後在匿名函數中運行代碼。然後

這將使您的代碼看起來象：

$(".img").load(function(){ 
    if ($(this).width() > $(this).height()) { 
     $(this).addClass("horizontal"); 
    } 
}); 

然而，如果你這樣做了多張圖片，那麼你就需要來包裝在每個塊：

$(".img").each(function() { 
    $(this).load(function(){ 
     if ($(this).width() > $(this).height()) { 
      $(this).addClass("horizontal"); 
     } 
    }); 
}); 

雖然一很少有海報正確地說目前您的代碼使用的是未定義的this