2

これは私のHTMLコードです：

<div id="staticlinks">
<a class="thumb" href="https://www.facebook.com/" target="_blank"><img src="images/facebook.png"/></a>
<a class="thumb" href="https://www.twitter.com/" target="_blank"><img src="images/twitter.png" /></a>
<a class="thumb" href="https://www.youtube.com/" target="_blank"><img src="images/youtube.png" /></a>
<a class="thumb" href="https://www.youtube.com/" target="_blank"><img src="images/feed.png" /></a>
<a class="thumb" href="https://www.google.com/" target="_blank"><img src="images/google.png" /></a>

</div>

これはjQueryコードです：

$(document).ready(
function(){
  $('.thumb').hover(
    function(){
      $(".thumb img", this).animate({height: '80px' , width:'80px'}, 'slow');
    }, function(){
      $(".thumb img", this).animate({height: '60px', width: '60px'}, 'slow');
    }
  );
}
);

問題は、「this」を削除すると$(".thumb img", this)、すべての画像がアニメーション化されることです。そして、ここに置くと、アニメーションは実行されません。問題は発生していません。

4

6 に答える 6

2

$(".thumb img", this).thumb「内thisのすべての要素を検索してから、その子孫要素をすべて検索する」という意味imgです。は要素であるため、内のすべての要素を検索するだけimgです。thisthis .thumb

あなたがする必要があるのは$('img', this)。

代わりに使用する方が直感的（そして非常に高速です！）であることに注意してください。find

$(this).find('img')

これはまったく同じことを意味しますが、私は、少し読みやすいと思います。

于 2013-02-10T17:19:15.880 に答える
2 
$(function(){
  $('.thumb').on('mouseenter mouseleave', function( e ){
      var size = e.type=='mouseenter' ? 80 : 60 ;
      $("img", this).animate({height: size , width: size }, 800);
  });
});

あなたのハンドラーは、あなたがもはや関連性のないものを再び指し示していたよりも、どの要素である.thumbかをすでに指し示していました。 さて、あなたは実際にどちらが期待通りに機能するかを言っているのです。 上記は同じことを達成するための良い方法です。<a>".thumb img", thisthis
"img", this"img", children of THIS hovered

于 2013-02-10T17:20:18.773 に答える
2 
$(document).ready(
function(){
  $('.thumb').hover(
    function(){
      $(this).animate({height: '80px' , width:'80px'}, 'slow');
    }, function(){
      $(this).animate({height: '60px', width: '60px'}, 'slow');
    }
  );
}
);
于 2013-02-10T17:21:27.750 に答える
1

$("img", this);の代わりに使用ホバーされたすべての下に$(".thumb img", this)かかります。imgthis.thumb

于 2013-02-10T17:19:34.817 に答える
1

これを試して：

$("img", this)

あなたはホバリングしている.thumbので、このようにする必要があります。

またはこのように：

$(this).find('img').animate({....})
于 2013-02-10T17:19:44.187 に答える
1

これは何ですか"？

多くのオブジェクト指向プログラミング言語では、this (または self) は、現在実行中のメソッドが呼び出されたオブジェクトを参照するためにインスタンス メソッドで使用できるキーワードです。

（ウィキペディアより）

jQuery ではthis、DOM 要素を参照します。

$('.thumb').hover(function() {
    // $(this) refer to $('.thumb')
});

またはオブジェクト:

function foo(element) {
    this.a = 'a'; // Refer to object

    element.each(function() {
         $(this).css('color', 'red');

        // now this refer to current element of each, which is a DOM element
    })
}
于 2013-02-10T17:22:22.887 に答える