添加和刪除類onClick動作

Question

<button class="fbutton btn pull-right filterevents " id="one" >School Events</button> 
    <button class="fbutton btn pull-right filterevents" id="two" >Zone Events</button> 
    <button class="fbutton btn pull-right filterevents" id="three" >My Events</button> 

我需要將類「選定」添加到特定按鈕onClick。

我的代碼是

$("#one").click(function(e) { 
       $(this).addClass("fcurrent"); 
       $("#two").removeClass("fcurrent"); 
       $("#three").removeClass("fcurrent"); 
    }); 

如果我使用的，而不是ID像下面的類，

$(".fbutton").click(function(e) { 
        $(this).addClass("fcurrent"); 
     }); 

那麼如何去除fcurrent類其他兩個按鈕

Answer 1

嘗試這個。

$(".fbutton").click(function (e) { 
$(this).addClass("fcurrent").siblings().removeClass("fcurrent"); 
}); 

DEMO

Answer 2

$(".fbutton").click(function(e) { 
    $(".fbutton").removeClass("fcurrent"); 
    $(this).addClass("fcurrent"); 
}); 

Answer 3

您可以首先從所有按鈕元素刪除.fcurrent類，那麼你的類添加到當前按鈕是這樣的：

$(".fbutton").click(function(e) { 
    $(".fbutton").removeClass("fcurrent"); 
    $(this).addClass("fcurrent"); 
} 

Answer 4

如果你只使用fcurrent類這些按鈕，可以在將其添加到當前按鈕之前將其從任何其他按鈕中刪除該類：

$('.fbutton').click(function(e) { 
    $('.fcurrent').removeClass('fcurrent'); 
    $(this).addClass('fcurrent'); 
}); 

Answer 5

您可以先從所有按鈕中刪除類fcurrent，然後再將它添加到您單擊的那個。

$(".fbutton").click(function(e) { 
    $(".fbutton").removeClass("fcurrent"); 
    $(this).addClass("fcurrent"); 
}); 

Answer 6

你可以試試這個 -

$(".fbutton").click(function(e) { 
    $(".fbutton").removeClass("fcurrent"); 
    $(this).addClass("fcurrent"); 
});