画像が水平か垂直かを調べる

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（）は配列を返します。各配列内の項目を1つに制限するか、各ブロック内でコードを実行してみてください。

$（これ）にはイメージのコンテキストもありません。

$(".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" を持つ要素の配列を返します。一度に1つずつ行うと、それは機能します。

は、ここで例を参照してください：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