使用$（本）正確jQuery中

Question

$(".gear_listing").hover(function(){ 

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

以上是我的jQuery代碼，如u可以想像我試圖表明.overlay_gears DIV時.gear_listing DIV是懸停，上面的代碼工作只是罰款。問題是我有很多數量的.gear_listing div和許多.overlay_gears div，當我將鼠標懸停在任何一個叫做.gear_listing的div上時，所有的.overlay_gears div都顯示出來，我不想要。我只想顯示.overlay_gears div，該.gear_listing div 。我知道我必須使用$（這個）。我只是不知道如何。

我試着這樣做：

$(".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> 

Answer 1

.overlay_gears是.gear_listing孩子，讓使用這樣

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

Answer 2

由於overlay_gears是gear_listing子元素，你可以使用.find()方法

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

Answer 3

使用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(); 
}); 

Answer 4

使用.find()和.slideToggle()用於動畫效果或使用.fadeToggle()

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

或

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

Fiddle

Answer 5

基本上，你首先需要隱藏懸停所有.overlay_gears，只是需要顯示特定.overlay_gears那是當前徘徊父母的孩子。然後在'unhover'事件中，您可以簡單地隱藏所有.overlay_gears div ..

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>標籤，並添加一些CSS我ñ搗鼓視覺啄

Answer 6

可以使用

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

在這裏，我們選擇具有所需的類 http://www.w3schools.com/jquery/jquery_traversing_descendants.asp

Answer 7

內$（本）的所有元素的功能通過一個事件像

function(evt){ 
var th = $(evt.target); 
$(th).find(".overlay_gears").show(); 
}