按钮组中的切换类

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"，并且组中具有 @987654325 类的任何其他按钮@ 将切换回 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

Demo

$('.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 的类

Answer 2

请注意，您不必将类btn-default 替换为btn-primary，您可以简单地应用btn-primary 类，它的样式将取代btn-default 的样式，因此您不必执行额外的操作。

$('.btn-group .btn').on('click', function() { // On the click event for each button
  $(this) // get the button being clicked
    .addClass('btn-primary') // add the `btn-primary` class
    .siblings('.btn-primary') // get all sibling buttons which may already be selected
    .removeClass('btn-primary'); // remove the selected class
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

Answer 3

尝试使用.toggleClass()

var buttons = $("button");
buttons.on("click", function() {
  buttons.toggleClass("btn-default", true).removeClass("btn-primary")
  .filter(this).toggleClass("btn-primary btn-default");
})

.btn-primary {
  background:yellow;
}

.btn-default {
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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>