Question

我已经编写了这个简单的jQuery，它根据单击包含的锚来交换包含ul的类。它工作正常，但是，我知道这很麻烦。我想知道是否有人可以指出一种方法来做同样的效果，而无需手动输入每个类名。我只是一个jQuery newb，我希望了解更多信息。

我想有一个我可以编写的jQuery函数，它不会涉及手动插入每个类名，但是可以只使用锚标记的类并将其打到ul上。

jQuery

$("#infosplashnav a.news").click(function () { 
  $(this).parents("ul:eq(0)").removeClass();
  $(this).parents("ul:eq(0)").addClass("news");
});
$("#infosplashnav a.communitylife").click(function () { 
  $(this).parents("ul:eq(0)").removeClass();
  $(this).parents("ul:eq(0)").addClass("communitylife");
});
$("#infosplashnav a.youth").click(function () { 
  $(this).parents("ul:eq(0)").removeClass();
  $(this).parents("ul:eq(0)").addClass("youth");
});

HTML

<ul id="infosplashnav" class="news">
     <li><a href="#news" class="news">News &amp; Events</a></li>
     <li><a href="#communitylife" class="communitylife">Community Life</a></li>
     <li><a href="#youth" class="youth">Youth</a></li>
</ul>

Answer 1

$("#infosplashnav a").click(function () { 
  $(this).closest("ul").removeClass().addClass($(this).attr("class"));
});

Answer 2

你可以这样做：

classNames = ["news", "communityLife", "youth"];

$.each(classNames, function(n, className) {
  $("#infosplashnav a." + className).click(function () { 
    $(this).parents("ul:eq(0)").removeClass();
    $(this).parents("ul:eq(0)").addClass(className);
  });
});

Answer 3

不要忘记你也可以使用链接，所以

$(this).parents("ul:eq(0)").removeClass();  
$(this).parents("ul:eq(0)").addClass("news");

可以成为：

$(this).parents("ul:eq(0)").removeClass().addClass("news");

使用元素类在使用jQuery单击时交换类

3 个答案: