Question

我的切换功能只能切换3个类中的2个而不是第3个类。它会跳过我的星级课程，只是在我的事实和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），因此它会将文本设置为“军营”。

第三次点击，将再次添加所有三个类。

如果你想让它在类中循环，你必须手动实现它;我不知道有任何开箱即用的解决方案。您可能需要保留某种光标，或者连续迭代数组以检查当前活动的类，然后继续下一个。 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，最后一个条件保持未选中状态。因此，如果＆＃34; star＆＃34;班级存在，如果两者都是明星巴尔＆＃34;课程存在。

切换3个类onclick（仅切换2）

3 个答案: