將類添加到圖像onload - 確定是否風景

Question

我想確定它是否風景或肖像後，嘗試添加類到圖像。我遇到的問題是，該課程正在被添加到img標籤，如img.landscape，這顯然未正確註冊。我該如何正確實現這一點：<img class="landscape"？

$(data.images).each(function(j, imageURL){ 
     var thumbnail = new Image(); 
     thumbnail.src = imageURL; 
     thumbnail.onload = function() { 
      $('.images').append('<div class="image_mask"><a href="' + imageURL + '"><img src="' + imageURL + '"/></a></div>'); 
      if (thumbnail.width > thumbnail.height){ 
       $(this).addClass('landscape'); 
      } 
     }; 
}); 

我以前的解決方案是包括if/else語句在所附的字符串中添加的類，但我不知道是否有處理這個的更清潔的方式。謝謝！

EDIT--

http://jsfiddle.net/curly33/XeHzK/1/

Answer 1

我假設你想一個類添加到<img>標籤你之前動態創建幾行？如果是這樣，你可以這樣做是這樣的：

$('.image_mask img').addClass('landscape'); 

因爲它是在一個循環中，你將有多個div.image_mask，使用數組索引j作爲一類資格：

$(data.images).each(function(j, imageURL){ 
     ... 
     thumbnail.onload = function() { 
      $('.images').append('<div class="image_mask image_mask' + j + '"><a href="' + imageURL + '"><img src="' + imageURL + '"/></a></div>'); 
      //              ^^^^^^ 
      if (thumbnail.width > thumbnail.height){ 
       $('.image_mask' + j + ' img').addClass('landscape'); 
       //    ^^^^^^ 
      } 
     }; 
}); 

UPDATE

儘管這被接受了，但我覺得像我最初所建議的那樣添加類名是很笨拙的。一個清潔的方法是使用j數組索引變量結合jQuery的eq功能定位相關的圖像掩碼：

$('.images .image_mask').eq(j).addClass('landscape'); 

..then與整個添加類的方法做了。

Answer 2

只是把它放在你的字符串建築

$(data.images).each(function(j, imageURL){ 
     var thumbnail = new Image(); 
     thumbnail.src = imageURL; 
     thumbnail.onload = function() { 
      var orientationClass = thumbnail.width > thumbnail.height ? "landscape" : "portrait"; 
      $('.images') 
       .append(
        '<div class="image_mask"><a href="' + 
        imageURL + 
        '"><img class="' + 
        orientationClass + 
        '" src="' + 
        imageURL + 
        '"/></a></div>' 
       ); 
     }; 
}); 

編輯：更多選擇

如果你想更詳細，但乾淨，你可以打造出一個元素之一：

var $img = $('<img />', { 
    class: thumbnail.width > thumbnail.height ? "landscape" : "portrait", 
    src: imageUrl 
}); 

var $a = $('<a />', { 
    href: imageUrl, 
}).append($img); 

var $div = $('<div />', { 
    class: "image_mask" 
}).append($a); 

$('.images').append($div); 

或者，如果你想使用更高效的字符串建築，但它更可讀/高性能，你可以做一個AR ray加入：

var contents = [ 
    '<div class="image_mask"><a href="', 
    imageURL , 
    '"><img class="', 
    orientationClass, 
    '" src="', 
    imageURL, 
    '"/></a></div>']; 

$('.images').append(contents.join(''));