在jQuery中正确使用$(this）

using $(this) properly in jquery

本文关键字：this jQuery      更新时间：2023-09-26
    $(".gear_listing").hover(function(){
            $(".overlay_gears").show();
        },function(){
   $(".overlay_gears").hide();
}
    );

上面是我的jQuery代码，你可以想象我试图在悬停.gear_listingdiv时显示.overlay_gearsdiv，上面的代码工作得很好.问题是我有很多数量的.gear_listingdiv和很多.overlay_gearsdiv，当我将鼠标悬停在任何名为.gear_listing的div上时，所有.overlay_gearsdiv都显示我不想要的div.我只想在下面显示.overlay_gearsdiv我知道我必须使用$(this(.gear_listing，我只是不知道怎么做。

我尝试这样做：

    $(".gear_listing").hover(function(){
        var this=$(this);
            this.$(".overlay_gears").show();
        },function(){
   this.$(".overlay_gears").hide();
}
    );

它不起作用

以下是我的div 结构：

               <li>
                    <a href="#">
                        <div class="gear_listing relative">
                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>
                            <img src="images/list_one.jpg">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="gear_listing relative">
                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>
                            <img src="images/list_two.jpg">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="gear_listing relative">
                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>
                            <img src="images/list_three.jpg">
                        </div>
                    </a>
                </li>

.overlay_gears是.gear_listing的孩子，所以像这样使用

$(".gear_listing").hover(function(){
    $(this).children(".overlay_gears").fadeIn();
},function(){
    $(this).children(".overlay_gears").fadeOut();
});

将.find()和.slideToggle()用于动画效果或使用.fadeToggle() 

$(".gear_listing").hover(function() {
  $(this).find(".overlay_gears").stop().slideToggle();
});

或

$(".gear_listing").hover(function() {
  $(this).find(".overlay_gears").stop().fadeToggle();
});

小提琴

使用this作为选择器中的second-argument

，这是context

默认情况下，选择器在DOM starting at the document root内执行搜索。但是，可以通过使用 $() 函数的可选第二个参数为搜索提供备用上下文。

在内部，选择器上下文是使用 .find() 方法实现的，因此$( "SELECTOR", this )等效于$(this).find("SELECTOR") 

$(".gear_listing").hover(function() {
  $(".overlay_gears", this).show();
}, function() {
  $(".overlay_gears", this).hide();
});

由于overlay_gears是gear_listing的子元素，因此可以使用.find()方法

$(".gear_listing").hover(function() {
  $(this).find(".overlay_gears").show();
}, function() {
  $(this).find(".overlay_gears").hide();
});

基本上，您首先需要在悬停时隐藏所有.overlay_gears，只需要显示当前悬停父级的子级的特定.overlay_gears。然后在"取消悬停"事件中，您可以简单地隐藏所有.overlay_gearsdiv。

.HTML： 

<ul>
<li>
    <a href="#">
        <div class="gear_listing relative">
            <div class="overlay_gears absolute"> overlay_gears data1 overlay_gears data1</div>
            <div class="gear_description absolute">
                <span>afdfdsfds sfd</span>
            </div>
        </div>
    </a>
</li>
<li>
    <a href="#">
        <div class="gear_listing relative">
            <div class="overlay_gears absolute"> overlay_gears data2 overlay_gears data2</div>
            <div class="gear_description absolute">
                <span>afdfdsfds sfd</span>
            </div>
        </div>
    </a>
</li>
<li>
    <a href="#">
        <div class="gear_listing relative">
            <div class="overlay_gears absolute"> overlay_gears data3 overlay_gears data3 overlay_gears data3</div>
            <div class="gear_description absolute">
                <span>afdfdsfds sfd</span>
            </div>
        </div>
    </a>
</li>
</ul>

JQuery：

$(document).ready(function(){
    $( ".gear_listing" ).hover(
      function() {
        $( ".overlay_gears" ).hide();
        $( ".overlay_gears", this ).show();
      }, function() {
        $( ".overlay_gears" ).hide();
      }
    );
});

工作小提琴：http://jsfiddle.net/kfopaj7e/

我刚刚删除了<img>标签以进行测试，并在 Fiddle 中添加了一些 css 用于视觉效果

您可以使用 

$(".gear_listing").hover(function(){ 
$(this).children('.overlay_gears').show();
}

在这里，我们使用所需的类选择 $(this( 中的所有元素http://www.w3schools.com/jquery/jquery_traversing_descendants.asp

在

函数中传递一个事件，例如

function(evt){
var th = $(evt.target);
$(th).find(".overlay_gears").show();
}
相关文章：