如何使用“this”关键字定位元素？

Posted 2023-05-09

【中文标题】如何使用“this”关键字定位元素？

【英文标题】：How to target an element using "this" keyword?

【发布时间】：2015-02-17 16:23:41

【问题描述】：

<div class="col-xs-12 col-sm-4">
        <div class="thumbnail-container">
            <img class="img-responsive" src="http://placehold.it/1024x768" >
            <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)
    )

我有其中的 6 个 "thumbnail-container"，我想仅在其中一个悬停时执行该 jquery 代码（显然）。现在，当我将鼠标悬停在"p.text-center" 上时，代码会淡出所有6 容器中的所有div。我尝试将"this" 关键字放在任何地方，但它仍然无法正常工作。

【问题讨论】：

您确定您使用的this 正确吗？ ***.com/questions/1051782/jquery-this-vs-this

在mouseenter 回调中，this 代表被悬停的.text-center 元素。您需要从该上下文中选择父 .thumbnail-container。

【参考方案1】：

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)
    );

【参考方案2】：

您的事件处理程序位于.text-center 上，但您要淡出的元素是它与.thumbnail-overlay 的同级元素，因此您可以这样做：

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

【讨论】：

是的。而已。谢谢。 jbarnett 解决方案也有效，但您的输入更少

【参考方案3】：

<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);