切换按钮组中的类

Question

我有一组按钮的以下标记:

<div class="btn-group pull-right">
    <button type="button" class="btn btn-default" id="today">Today</button>
    <button type="button" class="btn btn-default" id="this_week">This Week</button>
    <button type="button" class="btn btn-default" id="this_month">This Month</button>
    <button type="button" class="btn btn-default" id="custom">Custom</button>
</div>

我正在尝试使用jQuery 替换按钮上的btn-default类btn-primary,以便在单击时,单击的按钮将具有以下内容class="btn btn-primary",并且具有类的组中的任何其他按钮btn-primary将切换回btn-default.

对于我在下面提供的内容,是否有更优雅的解决方案？我是否必须为每个按钮编写一个功能？此外,我冒险将btn添加btn-default到已经具有该类的按钮.任何帮助是极大的赞赏.

$("#today").click(function () {
    $(this).parent().find("btn btn-primary").removeClass("btn btn-primary");
    $(this).parent().addClass("btn btn-default");
    $(this).addClass("btn btn-primary");
});

Answer 1

演示

$('.btn-group').on('click', '.btn', function() {
  $(this).addClass('btn-primary').siblings().removeClass('btn-primary').addClass('btn-default');
});

.btn-default {
  color: red;
}
.btn-primary {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="btn-group pull-right">
  <button type="button" class="btn btn-default" id="today">Today</button>
  <button type="button" class="btn btn-default" id="this_week">This Week</button>
  <button type="button" class="btn btn-default" id="this_month">This Month</button>
  <button type="button" class="btn btn-default" id="custom">Custom</button>
</div>

1. $(this):是单击的按钮
2. addClass('btn-primary'):将指定的类添加到单击的按钮
3. .siblings('.btn'):将获得具有元素btn类的兄弟姐妹(同一级别的节点)this
4. .removeClass('btn-primary').addClass('btn-default'):相应地更新类 siblings