1

したがって、Red クラスをクリックすると、blue_on および green_on クラス (使用されている場合) が Blue および Green ボタンから削除されます。

<div id="dashboard-menu">
    <div id="red" class="red_on">Red</div>
    <div id="blue" class="blue_off">Blue</div>
    <div id="green" class="green_off">Green</div>
</div>

私の問題をより小さな領域で再現しようとしているコードペン: http://codepen.io/leongaban/pen/vzolu

参照用の私の実際のコード

<div id="dashboard-menu">
    <div id="dash-btn" class="dashboard-button-on">
        <div class="icon"></div>
        <span>Dashboard</span>
    </div>

    <div id="dash-btn" class="affiliate-button-off">
    <span>Affiliate Search</span>
    </div>

    <div id="dash-btn" class="wishlist-button-off">
    <div class="icon"></div>
    <div class="count">3</div>
    </div>
</div>
4

3 に答える 3

5 
$(this).siblings().removeClass('blue_on green_on');

http://api.jquery.com/removeClass

ただし、何を達成しようとしているのかによっては、複数の (スペースで区切られた) クラスを利用する方がよい場合があります。

<div id="dashboard-menu">
    <div class="red on">Red</div>
    <div class="blue">Blue</div>
    <div class="green">Green</div>
</div>

JS:

$(this).addClass('on').siblings().removeClass('on'); // radio-button behavior
于 2013-06-17T19:11:38.860 に答える
1

私はあなたのコードペンをかなり簡素化しました....

http://codepen.io/anon/pen/yaJxD

あなたが持っていたすべての if/then ステートメントの代わりに、完全な JavaScript をここに示します......

  $('.but').click(function() {
    var color = $(this).attr('id');
    $('.but').css('background','#666');
    $(this).css('background',color);
  });

html を .... に変更するだけで、既に色として id を持っています....色として id を持たない場合は、data-color 属性を追加して、 var color = $(this).data('color')代わりに変更してください。

<div id="dashboard-menu">
 <div id="red" class="but on">Red</div>
 <div id="blue" class="but off">Blue</div>
 <div id="green" class="but off">Green</div>
</div>
于 2013-06-17T19:22:11.333 に答える
1

次のような一般的なものを書くことができます：

これにより、ID ごとに個別にクリック ハンドラーを作成する必要がなくなり、おそらく ID と、各 ID に基づく複数のハンドラーを冗長コードで取り除くことができます。

    var dash = {
    menu_red: true,
    menu_blue: false,
    menu_green: false
};


$(document).ready(function () {
    // Main function
    $(function () {
        $('#dashboard-menu > div').on('click', function () {
            $(this).removeClass(this.id + "_off").addClass(this.id + "_on"); // For the clicked item remove the off class and add the on class
            dash["menu_" + this.id] = true; // set the property to true.
            $(this).siblings().removeClass(function () { //use remove class on siblings
                dash["menu_" + this.id] = false; //set the property to false
                return this.id + "_on"; //get the on class to be removed
            }).addClass(function () {

                return this.id + "_off"; //get the offclass to be removed
            });
           console.log(dash)
        });
    });
});

フィドル

他の人が述べたように、状態に 1 つのクラスのみを使用するとon、次のように大幅に単純化できます。

$(document).ready(function () {
    // Main function
    $(function () {
        $('#dashboard-menu > div').on('click', function () {
            $(this).addClass("on");

            dash["menu_" + this.id] = true;

            $(this).siblings('.on').removeClass(function () {
                dash["menu_" + this.id] = false;
                return "on";
            });

           console.log(dash)
        });
    });
});

css を次のように配置します。

.red, .blue, .green {
    color: #ccc;
    background: #666;
}
.red.on {
    background: red;
}
.blue.on {
    background: blue;
}
.green.on {
    background: green;
}

フィドル

于 2013-06-17T19:19:38.700 に答える