1

我的切换功能仅切换 3 个类中的 2 个，而不是第三个。它跳过了我的明星班，只是在我的事实班和巴尔班之间切换。我已经改变了很多方法，它只切换了 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");
    }
 });
4

3 回答 3

2

您是否试图让代码在连续三次点击时循环浏览所有三个文本？因为那不是toggleClass。toggleClass打开或关闭一个或多个类。

正如您可以通过这个 fiddle 看出的那样，单击链接会同时切换边框、字体大小和斜体类。

它从没有任何课程开始。在单击 1 时，它将具有所有三个类。然后它将匹配第一个条件（它具有fact类），并且由于它们是else if's，因此不会检查其他条件。文本将简单地设置为“工厂”。

在第二次单击时，所有三个类都将被删除。它不满足第一个条件 ( fact) 或第二个条件 ( star)，因此它将文本设置为“兵营”。

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

如果您希望它在类中循环，则必须手动实现；我不知道有什么开箱即用的解决方案。您要么需要保留某种游标，要么不断迭代数组以检查当前处于活动状态的类，然后继续下一个。示例；我敢肯定它可以更整洁。

于 2012-08-07T13:52:27.390 回答
0

这是工作示例：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”类都存在，这在逻辑上是错误的。

于 2012-08-06T16:08:03.653 回答
0

这是一次尝试……你不应该这样做吗

$("#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");
}
});
于 2012-08-06T16:03:19.833 回答