JQuery如何選擇當前列表項中的所有錨點？

Question

我希望使用JQuery，當我將鼠標懸停在列表項上時，顯示並隱藏一些錨標籤。

如何使用$（this）循環顯示列表項目中的當前錨點？

這是我到目前爲止有：

$(document).ready(function() { 
    $('.currentlist > li').mouseover(function(event){ 
     // loop through each anchor tag within this list using $(this) 
     // and add the .active class 
    }); 
    $('.currentlist > li').mouseout(function(event){ 
     // loop through each anchor tag within this list using $(this) 
     // and remove the .active class 
    }); 
}); 


a .active 
{ 
    display: block; 
} 

a.edit-icon 
{ 
    display: none; 
} 

a.delete-icon 
{ 
    display: none; 
} 

<ul class="currentlist"> 
    <li><a href="#" class="active">index</a><a href="#" class="edit-icon">edit</a><a href="#" class="delete-icon">delete</a></li> 
    <li><a href="#" class="active">profile</a><a href="#" class="edit-icon">edit</a><a href="#" class="delete-icon">delete</a></li> 
    <li><a href="#" class="active">contactus</a><a href="#" class="edit-icon">edit</a><a href="#" class="delete-icon">delete</a></li> 
    <li><a href="#" class="active">findus</a><a href="#" class="edit-icon">edit</a><a href="#" class="delete-icon">delete</a></li> 
</ul> 

Answer 1

試試這個：

$(document).ready(function() { 
    $('.currentlist > li').mouseover(function(event){ 
     $(this).find('a').addClass('active'); 
    }); 
    $('.currentlist > li').mouseout(function(event){ 
     $(this).find('a').removeClass('active'); 
    }); 
}); 

凡$(this)指徘徊li和$('a', $(this))上下文選擇用於查找在他們裏面的所有鏈接，並添加/刪除類。

Answer 2

喜歡的東西

$(event.currentTarget).find("a.active").removeClass("active") 

應該爲你做它。

Answer 3

您可以使用.hover()縮短事件，.find()得到主持人和.addClass()和.removeClass()對切換.active和關閉，就像這樣：

$(function() { 
    $('.currentlist > li').hover(function() { 
    $(this).find('a').addClass('active'); 
    }, function() { 
    $(this).find('a').removeClass('active'); 
    }); 
}); 

你要在這裏使用.hover()因爲mouseover和mouseout將在進入和退出兒童時觸發，其中mouseenter和mouseleave（其使用.hover()）不會）。

而且你的CSS需要修復，這一點：

a .active 
{ 
    display: block; 
} 

應該不會有空間，就應該是這樣的：

a.active 
{ 
    display: block; 
} 

而且，它應該被移動到年底使它會覆蓋.edit-icon和.delete-icon的定義。

Here's a working version with all of the above changes。