jQuery 為按鈕選擇設置活動類

Question

我有一些像這樣的html東西，

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Low Cost/Effeciency</button>
</div>
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Average</button>
</div>
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">High Cost</button>
</div>

從我上面的片段來看，每個btn-group包含一個button 。 我想在button單擊時添加active類並刪除active類，即按鈕已設置為active 。 這意味着像單選按鈕選擇。

我在 jQuery 中這樣嘗試過，但沒有提供確切的解決方案。

$(document).on('click', '.btn-group button', function (e) {
    $(this).addClass('active').parent('.btn-group').find('button').removeClass('active');
});

我怎樣才能做到這一點？

Answer 1

你可以使用toggleClass來做到這一點，

$(document).on('click', '.btn-group button', function (e) {
    $(this).toggleClass('active');
});

演示

編輯：

$(document).on('click', '.btn-group button', function (e) {
    $(".active").not($(this).addClass('active')).removeClass();
});

演示

Answer 2

試試下面：

$(document).on('click', '.btn', function (e) {
   $(".btn").removeClass("active");
   $(this).addClass("active")
});

Answer 3

嘗試這個

$(document).on('click', '.btn.btn-default', function (e) { $(".btn.btn-default").removeClass("active"); $(this).addClass("active"); });