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。我想在active点击时添加button课程，并删除已设置为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');
});

DEMO

<强> 编辑：

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

DEMO

Answer 2

尝试以下：

1.6.0

Answer 3

试试这个

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