1

私のフィドルを使用して、ロード時にメインメニューボタンの1つを強調表示し、対応するボタンを下部に設定する show() および hide() ようにしました。

私が間違っていると思うのですが、自分自身で理解できないのは、switch ステートメントで$this変数の参照スコープを実行することです。私の場合、 $this はクリックされたボタンの値を指します。これはクラスの名前であると推測されますが、switch ステートメントでは、$thisから ID 名を参照できるかどうかわかりません。私の質問は、私のシナリオで$thisが保持する値は何ですか?

単純化できる場所で多くの重複を見ることができるので、おそらくコードが少ない、実際の例を見るといいでしょう。

$('.menu').click(function () {
    if ($(this) != $('.highlight')) {
        $(this).addClass('highlight')
            .siblings('.menu')
            .removeClass('highlight');
    }
    switch ($this) {
        case '#dateMenu':
            $('.date-chart').show();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case '#jcMenu':
            $('.date-chart').hide();
            $('.jc-chart').show();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case '#jpMenu':
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').show();
            $('.ws-chart').hide();
            break;
        case '#wsMenu':
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').show();
            break;
    }
});
4

2 に答える 2

2

$thisはず$(this)です...これは現在の要素への参照です...IDをチェックしているためです。使用してprop()ください。

 switch ($(this).prop('id')) {  or  switch (this.id) { ...

#ケースから外します

これを試して

 $('.menu').click(function () {
if (!$(this).hasClass('.highlight'))) {
    $(this).addClass('highlight')
        .siblings('.menu')
        .removeClass('highlight');
}

switch ($(this).prop('id')) {
    case 'dateMenu':
        $('.date-chart').show();
        $('.jc-chart').hide();
        $('.jp-chart').hide();
        $('.ws-chart').hide();
        break;
    case 'jcMenu':
        $('.date-chart').hide();
        $('.jc-chart').show();
        $('.jp-chart').hide();
        $('.ws-chart').hide();
        break;
    case 'jpMenu':
        $('.date-chart').hide();
        $('.jc-chart').hide();
        $('.jp-chart').show();
        $('.ws-chart').hide();
        break;
    case 'wsMenu':
        $('.date-chart').hide();
        $('.jc-chart').hide();
        $('.jp-chart').hide();
        $('.ws-chart').show();
        break;
}
});

ここでフィドル

更新しました

削減されたコードの場合... siblings() を使用できます。

 switch ($(this).prop('id')) {
    case 'dateMenu':
        $('.date-chart').show().siblings().hide();

        break;
    case 'jcMenu':

        $('.jc-chart').show().siblings().hide();

        break;
    case 'jpMenu':

        $('.jp-chart').show().siblings().hide();

        break;
    case 'wsMenu':

        $('.ws-chart').show().siblings().hide();
        break;
}

更新されたフィドル

于 2013-07-15T04:52:03.730 に答える
1

($this)割り当てなしでは間違っています。代わりに使用してくださいthis.id

あなたは確かにのように使うことができます

var id = this.id;
switch (id)

そして#、あなたのケースで削除して、以下のようにします

switch (this.id) {
        case 'dateMenu': //removed #
            $('.date-chart').show();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case 'jcMenu':  //removed #
            $('.date-chart').hide();
            $('.jc-chart').show();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case 'jpMenu':  //removed #
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').show();
            $('.ws-chart').hide();
            break; 
        case 'wsMenu':  //removed #
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').show();
            break;
    }

働くフィドル

于 2013-07-15T04:51:39.623 に答える