添加和刪​​除類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上添加“selected”類。

我的代碼是

$("#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");
});