如何在jQuery中使用'this'？

Question

這是我的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'); 
    } 
); 
} 
); 

的問題是，當我刪除「這」從$(".thumb img", this)然後所有圖像被動畫。如果我把它放在這裏，那麼動畫就不會發生。我沒有得到這個問題。

Answer 1

$(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", this是this不相關了。
現在，通過做"img", this你實際上是說"img", children of THIS hovered這將按預期工作。
以上是實現這一目標的好方法。

Answer 2

$(".thumb img", this)表示「查找所有.thumb元素在this之內，然後查找其所有的子元素img元素」。你只是想找到this內的所有img元素，因爲this是.thumb元素。

所有你需要做的是$('img', this)。

請注意，它更直觀（和分鐘更快！）來代替使​​用find。

$(this).find('img') 

這意味着完全相同的東西，但我認爲，有點容易閱讀。

Answer 3

使用$("img", this);代替$(".thumb img", this)將採取一切imgthis下，這是徘徊.thumb。

Answer 4

試試這個：

$("img", this) 

你徘徊在.thumb所以你應該做這樣。

或者這樣說：

$(this).find('img').animate({....}) 

Answer 5

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

Answer 6

什麼是「this」？

在許多面向對象編程語言中，這種（或自）是 關鍵字可以在實例方法被用來指在其上當前正在執行的方法已經被調用的對象 。

（從​​）

在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 
    }) 
}