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

您可以使用.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（{ {3}}使用）不会）。

此外，您的CSS需要修复，这个：

a .active
{
  display: block;
}

不应该有空格，应该是这样的：

a.active
{
  display: block;
}

此外，它应该移到最后，以便覆盖.edit-icon和.delete-icon定义。

.hover()

Answer 3

像

这样的东西

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

应该为你做。

JQuery如何选择当前列表项中的所有锚点？

3 个答案: