Question

我需要在一个带有链接的范围内交换该类，该链接基于链接是否具有特定类的条件。试过这个，但似乎没有用。我错过了什么？

if ($("#myLink").hasClass("dis")) {
    $("#myLink").find("span").toggleClass("uico", "uicoGR");
} else {
    $("#myLink").find("span").toggleClass("uicoGR", "uico");
}

<a href="#" id="myLink" class="dis"><span class="uico"></span></a>

Answer 1

类应该在单个字符串参数中传递，用空格分隔，例如：

$("#myLink").find("span").toggleClass("uico uicoGR");

Answer 2

要切换的两个类名应该在第一个参数中传递，用空格分隔。

此外，hasClass()条件可以添加到选择器。

$('.dis#mylink span').toggleClass('uico uicoGR') ;

修改

再次阅读这个问题，你不清楚你是否理解toggleClass()所做的事情。此函数查找所有已命名的类，如果找不到则添加它们，如果不是，则删除它们。看来你所追求的是根据是否找到第三个类来添加或删除类。为此，只需使用addClass()和removeClass()：

$('#mylink').each(function() {
  if($(this).hasClass('dis')) {
    $(this).find('span').addClass('uicoGR').removeClass('uico') ;
  } else {
    $(this).find('span').addClass('uico').removeClass('uicoGR') ;
  }
}) ;

Answer 3

如果你坚持使用双类方法，那么Gus在这里有正确的答案，但我会挑战你是否需要这个代码。如果这些类用于CSS，那么你不需要任何这个javascript，因为你已经有足够的信息来识别CSS选择器中的两个状态，而无需添加/删除uicoGR或uico。

第一个状态（你使用的是.uicoGR）是这个CSS选择器：

#mylink span {put your CSS here}

第二个状态（你使用的是.uico）是这个CSS选择器：

#mylink.dis span {put your CSS here}

当“dis”类存在时，第二个状态将覆盖第一个状态的CSS。

使用jquery的toggleClass

3 个答案: