jquery 我怎样才能改变链接 class 当这个链接 ic 单击时

Question

我有一个 li 项目，我需要更改点击项目的 class，如下所示

• 从默认值中删除 class 当前
• 将 class current 添加到点击的那个

我的 html 代码在这里

                <ul class="filter">
                <li><a href="#" title="" class="current">recent</a></li>
                <li><a href="#" title="">top popularity</a></li>
                <li><a href="#" title="">top commented</a></li>
                <li><a href="#" title="">other ...</a></li>

            </ul>

这是完成这项工作的 jquery 代码

      $(".filter > li a").click(function(){

      $(".filter li a.current").removeClass("current");
        $(this).addClass("current");
      });

它工作完美，否则当我点击任何链接时，这些链接将代码应用于它，我只需要将此代码应用于 ul.filter

Answer 1

可能这会更容易和更简单。 它所做的只是删除其兄弟当前 class 并向其自身添加新的当前 class。

$('.filter a').click(function(){
  $(this).addClass('current').siblings().removeClass('current');
});

Answer 2

使用:not() 省略当前项

   $(".filter > li a").not(".current").on('click', function(){
       if(!$(this).hasClass("current")) {
           $(".filter").find("a.current").removeClass("current");
           $(this).addClass("current");
           alert($(this).html());
       }
   });

演示

Answer 3

这个片段应该适合你！

$('.class a').on('click', function(){
  $('.class a').removeClass('current');
  $(this).addClass('current');
});

Answer 4

如果您希望点击处理只发生在 ul.filter 中，那么您应该更新您的选择器以反映这一点：

$("ul.filter > li a")

而不是

$(".filter > li a")

如果你有多个带有“过滤器”class 的 ul 元素，并且你只想将功能应用于其中一个，那么你应该给那个特定的 ul 一个 id 并更改你的选择器以使用该 id。