在单击时切换3类(仅切换2类)

Question

我的切换函数只切换3个类中的2个，而不是第三个类。它跳过了我的star类，只是在我的fact和barr类之间切换。我已经改变了很多方法，它只在3个类中的2个类之间切换。

我的Html

<div id="labalt"><a href="#">Alt</a></div>
  <h1 id="build_title" class="barr" >Barracks</h1>

我的代码

$("#labalt").click(function() {
    $(this).toggleClass("fact star barr");

if($(this).hasClass("fact"))
    {
    $("#build_title").html("Factory");
    }
else if($(this).hasClass("star"))
{
    $("#build_title").html("Starport");
    }
else
{
    $("#build_title").html("Barracks");
    }
 });

Answer 1

您是否正在尝试让代码在连续单击三次时循环浏览所有三个文本？因为这不是toggleClass所做的。toggleClass可以打开或关闭一个或多个类。

As you can tell by this fiddle时，单击该链接可同时切换边框、字体大小和斜体类。

它从没有任何类开始。单击1时，它将拥有所有三个类。然后它将匹配第一个条件(它有fact类)，因为它们是工厂的，所以不会检查其他条件。文本将简单地设置为“else if”。

第二次单击时，所有三个类都将被删除。它不会满足第一个标准(fact)或第二个标准(star)，因此它会将文本设置为"Barracks“。

第三次单击时，所有三个类都将再次添加。

如果您希望它在类中循环，则必须手动实现；我不知道是否有任何开箱即用的解决方案。您可能需要保持某种类型的游标，或者连续迭代数组以检查当前活动的类，然后转到下一个类。Example；我敢肯定它可以更整洁。

Answer 2

这是一种尝试。你不是应该做

$("#labalt").click(function() {
$(this).toggleClass("fact star barr");

if($(this).hasClass("fact"))
{
    $("#build_title").html("Factory");
}
if($(this).hasClass("star"))
{
    $("#build_title").html("Starport");
}
if($(this).hasClass("barr"))
{
    $("#build_title").html("Barracks");
}
});

Answer 3

以下是工作示例：http://jsfiddle.net/LRuZp/1/

我想，你的条件语句有问题。

Case 1.  <div id="labalt" class="fact"></div>

  Result after toggling: <div id="labalt" class="star barr">

Case 2.  <div id="labalt" class="fact star"></div>

  Result after toggling: <div id="labalt" class="barr">

Case 3. <div id="labalt" class=""></div>

  Result after toggling: <div id="labalt" class="fact star barr">

使用条件语句：

if($(this).hasClass("fact"))
{
$("#build_title").html("Factory");
}
else if($(this).hasClass("star"))
{
 $("#build_title").html("Starport");
}
else
{
  $("#build_title").html("Barracks");
}

一次可以有两个类。

情况1:第二个if条件设置为true，最后一个条件保持未选中状态。因此，如果存在"star“类，则不会执行最后一个条件，如果两个"star barr”类都存在，则在逻辑上是错误的。