0

タイトルが示すように、私はjQueryを少し持っていることを探しています-画像が定義された幅よりも小さい場合、それはクラスに特定の要素を追加します。これは、私にとってはかなり簡単に思えますが、何らかの理由で機能していません。

$(document).ready(function() {
    var image = $('.work-each img');
        if (image.width() < 500) {
            $('.work-text').addClass('work-text-small');
        }
});

これは、各.work-eachの下にある画像が500px未満の場合、要素「work-text」にクラス「work-text-small」を追加する必要があります。

HTMLの例（それぞれ）

<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>
<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>
<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>

ありがとう、R

4

2 に答える 2

7

load代わりに、DOMの準備ができているときにimgタグのみが定義されているが、イメージがまだロードされていない場合に使用します。そのサイズは、完全にロードされたときに表示されます

$(window).load(function () {
    var image = $('.work-each img');
    if (image.width() < 500) {
        $('.work-text').addClass('work-text-small');
    }
});

ただし、@ rdckが指摘したように、class=".work-each img"コードを含む画像が他にもある場合は機能しないため、その場合は各画像を調べてクラスを適用します

$(window).load(function () {
    var image = $('.work-each img');
    image.each(function () {
        var that = $(this);
        if (that.width() < 500) {
            that.next('div.work-text').addClass('work-text-small');
        }
    })

});
于 2013-01-13T16:13:36.910 に答える
1

サーバーコードを使用してディメンションを取得し、それに応じてクラスを設定すると、画像が読み込まれるのを待つ必要がなくなり、htmlが存在するとすぐにcssが有効になります。

于 2013-01-13T16:37:18.007 に答える