1

私のトグル機能は、3つのクラスのうち2つだけを切り替えており、3つ目は切り替えていません。それは私のスタークラスをスキップし、私のファクトクラスとバークラスを切り替えるだけです。私はたくさんの方法で物事を変えました、そしてそれは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

3回の連続クリックで3つのテキストすべてを循環するようにコードを取得しようとしていますか？それはそうでtoggleClassはないからです。toggleClass1つ以上のクラスのオンとオフを切り替えます。

このフィドルからわかるように、リンクをクリックすると、境界線、フォントサイズ、およびイタリッククラスの両方が切り替わります。

それはどのクラスからも始まりません。クリック1で、3つのクラスすべてが表示されます。次に、最初の条件（factクラスがあります）に一致します。これらはelse if'sであるため、他の条件はチェックされません。テキストは単に「Factory」に設定されます。

2回目のクリックで、3つのクラスがすべて削除されます。最初の基準（fact）または2番目の基準（）を満たさないためstar、テキストは「兵舎」に設定されます。

3回目のクリックで、3つのクラスすべてが再び追加されます。

クラスを循環させたい場合は、手動で実装する必要があります。そのためのすぐに使える解決策があるかどうかはわかりません。ある種のカーソルを保持するか、配列を継続的に反復して現在アクティブなクラスを確認してから、次のクラスに移動する必要があります。例; 私はそれがもっときれいかもしれないと確信しています。

于 2012-08-07T13:52:27.390 に答える
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 に答える
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");
}

一度に2つのクラスが存在する可能性があります。

ケース1： 2番目のif条件がtrueに設定され、最後の条件がチェックされないままになっている場合。したがって、「star」クラスが存在する場合、最後の条件が実行されることはありません。これは、両方の「starbarr」クラスが存在する場合、論理的に間違っています。

于 2012-08-06T16:08:03.653 に答える