0

div をクリックすると div の最初のクラスを取得し、一連の if ステートメントを使用して、表示するドロップダウンを決定する関数を作成しようとしていますが、これがうまくいかない理由を一生理解できませんか?

div にはそれぞれ固有のクラス「Tab1」、「Tab2」... と共有クラス「headerTab」があります。

$(document).ready(function() {

$('.dropdown').hide();

    $(".headerTab").click(function() {
        $(".dropdown").hide();
        var clicked = $(this).attr("class").split(" ")[0];

        if (clicked == "Tab1") {
            $('.dropdown1').show();
        };

        else if (clicked == "voresVisionTab") {
            $('.dropdown2').show();
        };

        else (clicked == "Tab2") {
            $('.dropdown3').show();
        };

        else (clicked == "Tab3") {
            $('.dropdown4').show();
        };
    });
});

if ステートメントを削除すると、コードは正常に実行されます。ここで助けていただければ幸いです。

ありがとう。

4

4 に答える 4

3

他の人が指摘したように、ifステートメントを「;」で壊しました。

あなたのような単純な複数値のケースにはスイッチを使用してください。

$(document).ready(function() {

$('.dropdown').hide();

    $(".headerTab").click(function() {
        $(".dropdown").hide();
        var clicked = $(this).attr("class").split(" ")[0];

        switch (clicked)
        {
           case "Tab1":
               $('.dropdown1').show();
               break;

           case "voresVisionTab":
              $('.dropdown2').show();
              break;

           case "Tab2":
              $('.dropdown3').show();
              break;

           case "Tab3":
              $('.dropdown4').show();
              break;
        }
    });
});

これは、読み取りと保守がはるかに簡単です。

私の現実的な提案

この場合、.dropdown1セレクターをdata-クリックされたアイテムの属性内に配置することをお勧めします。そうすれば、そもそもそのコードはすべて必要ありません!

    $(".headerTab").click(function() {
        $(".dropdown").hide();
        $($this).data('target')).show();
    });

そして、あなたのheaderTabリンクには単にdata-target=".dropdown1"etc があります。データ駆動型になったため、数十から 2 行のコードになり、コードのメンテナンスの問題もありません。

注:.data('target')は便利な省略形です.attr('data-target')

于 2013-09-27T14:21:17.447 に答える
1

これを試して：

if (clicked == "Tab1") {
    $('.dropdown1').show();
} else if (clicked == "voresVisionTab") {
    $('.dropdown2').show();
} else if (clicked == "Tab2") {
    $('.dropdown3').show();
} else if (clicked == "Tab3") {
   $('.dropdown4').show();
};

;if と else の後に必要な else if があり、else しかありませんでした。

于 2013-09-27T13:33:37.763 に答える
0

2つ書くことはできませんelse。他には条件がありません。

$('.dropdown').hide();

    $(".headerTab").click(function() {
        $(".dropdown").hide();
        var clicked = $(this).attr("class").split(" ")[0];

        if (clicked == "Tab1") {
            $('.dropdown1').show();
        };

        else if (clicked == "voresVisionTab") {
            $('.dropdown2').show();
        };

        else if(clicked == "Tab2") {
              ^
            $('.dropdown3').show();
        };

        else if(clicked == "Tab3") {
              ^
            $('.dropdown4').show();
        };
    });
});
于 2013-09-27T13:36:07.513 に答える
0

まず、クラスを含む文字列を分割して配列にします。したがって、クラスがクラスの順序で最初ではない場合。あなたのifステートメントは正しいクラスを比較しません。次に、if-case の構文が間違っています。

次のことを試してください。

$('.headerTab').on('click', function() {
    var $this = $(this); // cache $(this)
    $(".dropdown").hide();

    if ($this.hasClass('Tab1')) {
        $('.dropdown1').show();
    } else if ($this.hasClass('voresVisionTab')) {
        $('.dropdown2').show();
    } else if ($this.hasClass('Tab2')) {
        $('.dropdown3').show();
    } else ($this.hasClass('Tab3')) {
        $('.dropdown4').show();
    }
});

編集: 各 headerTab に一意の ID (またはデータ プロパティ) を与えてから、クリックされたものを確認し、if ではなく switch-case と比較します。

于 2013-09-27T13:36:53.257 に答える