jquery - Jqueryは複数のボタンを切り替えます

Question

jquery トグルスクリプトを使用してアクティブな CSS スタイルを取得する複数のボタンがあります。しかし、一度に 1 つのボタンだけをアクティブにしたいのです。また、アクティブなボタンを再度クリックすると、非アクティブになる必要があります。

$(document).ready(function(){
    $('.button').click(function() {       
        $(this).toggleClass('buttonactive');
    });
});

基本的に、次の行を追加する必要があります。

$(all .button except this).removeClass('buttonactive');

方法がわかりません。誰かが私を助けることができますか？ここに問題のある JSFIDDLE があります: http://jsfiddle.net/nV5Tu/3/

score 9 · Accepted Answer

.toggleClass() を使用して現在の要素を切り替えると、.not()を使用して現在の要素を除外し、クラスが削除されないようにすることができます。

$('.button').click(function() {  
    $('.button').not(this).removeClass('buttonactive'); // remove buttonactive from the others
    $(this).toggleClass('buttonactive'); // toggle current clicked element
});

フィドル

score 1 · Accepted Answer

これでうまくいくはずです：

$(document).ready(function(){
    $('.button').click(function() {
        if($(this).hasClass("buttonactive")) {       
            $(this).removeClass('buttonactive');
        } else {
            $(this).addClass('buttonactive');
        }
        $(".button").removeClass("buttonactive"); // removes all other active classes
    });
});

score 1 · Accepted Answer

for all を単純に削除して for を追加しないのはなぜthisですか?

$('.button').click(function() {       
    $('.button').removeClass('buttonactive');    
    $(this).addClass('buttonactive');
});

score 0 · Accepted Answer

3つは必要ありませんdocument.ready(function()..1つで十分です..。

$('.button').click(function() { 
 $(".button").removeClass("buttonactive");  // remove the class for all button on click
});

ここをいじる

jquery - Jqueryは複数のボタンを切り替えます

4 に答える 4

Related

Reference