如何使用「this」關鍵字定位元素？

<div class="col-xs-12 col-sm-4"> 
     <div class="thumbnail-container"> 
      <img class="img-responsive" src="http://placehold.it/1024x768" alt="..."> 
      <div class="thumbnail-overlay"></div> 
      <p class="text-center text-nowrap" style="display:block">title</p> 
     </div> 
    </div> 

function overlay() { 
    $('.thumbnail-container > .text-center').mouseenter(function() { 
     $('.thumbnail-container > .thumbnail-overlay').fadeOut(500) 
    }) 
    $('.thumbnail-container > .text-center').mouseleave(function() { 
     $('.thumbnail-container > .thumbnail-overlay').fadeIn(500) 
    }) 
}

我有這些"thumbnail-container" 6我只想執行該jquery代碼只有當他們中的一個懸停（顯然）。現在，當我徘徊"p.text-center"代碼淡出所有容器中的所有div。我試過把"this"關鍵字放在任何地方，但它仍然不起作用。如何使用「this」關鍵字定位元素？

來源

2014-12-18 kernel32bts

你確定你使用正確的'this'嗎？ http://stackoverflow.com/questions/1051782/jquery-this-vs-this – kingdamian42

在'mouseenter'回調中，'this'代表被徘徊的'.text-center'元素。您需要從該上下文中選擇父級「.thumbnail-container」。 – zzzzBov

事件處理程序是在.text-center，但你要淡出元素是其兄弟與.thumbnail-overlay，所以你可以這樣做：

$(this).siblings('.thumbnail-overlay').fadeOut(500)

來源

2014-12-18 19:25:43

是的。而已。謝謝。也jbarnett解決方案的作品，但你的輸入較少 – kernel32bts

function overlay() { 
    $('.thumbnail-container > .text-center').mouseenter(function() { 
     $(this).parent().find('.thumbnail-overlay').fadeOut(500) 
    }); 
    $('.thumbnail-container > .text-center').mouseleave(function() { 
     $(this).parent().find('.thumbnail-overlay').fadeIn(500) 
    }); 
}

來源

2014-12-18 19:23:12 jbarnett

<p class="text-center text-nowrap" style="display:block" mouseenter="fade_out(this)" mouseleave="fade_in(this)">title</p>

和

function fade_in(element){ 
    $(element).fadeIn(500); 
} 

function fade_out(element){ 
    $(element).fadeOut(500); 
}

來源

2014-12-18 19:29:01

如何使用「this」關鍵字定位元素？

回答

相關問題