0

さて、私はこの (Wordpress を利用した) Web サイトをいくつかの画像で持っています。これらの画像がコンテンツ div をオーバーフローする時点で拡大縮小したいと考えています。それらを適切にスケーリングするには、幸いなことに.scaled、イメージを作成するクラスを追加するだけwidth:100%;で問題を解決できます。

私の問題は、画像がページに対して大きすぎるかどうかを検出しているときに、ページ上の特定の画像だけを選択できないように見えることです。

HTML:

<div class="entry-content">
   <p>
      <img src="http://upload.wikimedia.org/wikipedia/commons/f/fd/Luftballong.jpg" width="1024" height="768" class="alignnone">
   </p>
</div>

重要な CSS:

.scaled {
   width:100%;
 }

さて、jQuery です。現在、次のように設定しています。

$(window).resize(function() {
    if($('section .entry-content img').width() > $('.entry-content').width()) {
        $(this).addClass('scaled')
    }
});

私の問題は、よくあることですが、$(this). ここで実際の画像を選択するのではなく、他の何か、または特に何も選択しないと思います。

私の質問は、jQuery で画像を 1 つだけ選択し、それにクラスを適用する最良の方法は何ですか? を別のものに変更するだけの何かを見たい$(this)です。

前もって感謝します！

4

4 に答える 4

2 
$(window).on('resize', function() {
    $('section .entry-content img').filter(function() {
        return $(this).width() > $(this).closest('.entry-content').width();
    }).addClass('scaled');
});
于 2013-03-27T19:34:27.583 に答える
0

thisここには、あなたが望むことを行う関数についての良い答えがすでにたくさんありますが、イベント コールバック関数のコンテキスト内のキーワードは、JQuery によって渡された DOM 要素を参照することを追加する価値があると思いました。したがって、前の例では、実際には要素$(this)をラップする JQuery オブジェクトになりました。window

したがって、他の多くの例でわかるように、解決策は、使用していた JQuery オブジェクトのセレクターを変更することでしたthis。

于 2013-03-27T19:40:14.850 に答える
0

1 つの方法は、次のような変数を使用することです。

$(window).resize(function() {
  var $img = $('section .entry-content img')[0];
  if($img.width() > $('.entry-content').width()) {
    $img.addClass('scaled')
  }
});
于 2013-03-27T19:32:34.213 に答える
0

jQuery メソッドを次のように変更してみてください。

$(window).resize(function() {
    $( "section .entry-content img" ).each(function() {
        if($(this).width() > $('.entry-content').width()) {
            $(this).addClass('scaled')
        }
    });
});

これは、個々の img 要素のそれぞれに対して (そして "this" が相対的である) 関数を処理する必要があります。

于 2013-03-27T19:32:48.843 に答える