jQuery切换Twitter Bootstrap按钮类

Question

情景

我希望当按钮的主要部分被点击时（为了快速），用户可以使用jQuery来切换Twitter Bootstrap按钮类。

或者

允许用户从下拉菜单中选择状态。

无论选择哪个状态，整个btn-group应该有相同的按钮类。

尚未开始(btn-info)，正在进行(btn-warning)，已完成(btn-success)和延迟(btn-error)。

我的期望

目前的代码

以下是我的HTML代码。这是标准的Bootstrap按钮组。

<div class="btn-group">
    <button type="button" class="btn btn-warning">Week 7</button>
    <button type="button" class="btn btn-warning dropdown-toggle"
      data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
          <a href="#">Not Started</a>
        </li>
        <li>
          <a href="#">In Progress</a>
        </li>
        <li>
          <a href="#">Completed</a>
        </li>
        <li class="divider"></li>
        <li>
          <a href="#">Late</a>
        </li>
    </ul>
</div>

这个切换会影响所有按钮，而不仅仅是被点击的那个按钮。

$('.btn-group').click(function () {
  var classes = ['btn btn-info','btn btn-info','btn btn-success'];
  $('.btn').each(function(){
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

- Michael

Answer 1

不需要改变您的HTML，您可以使用以下JavaScript代码：

//// TOGGLE ////
// toggle only if the first part of the button (button:first-child) is clicked
$('button:first-child').click(function () {

    var classes = ['btn btn-info','btn btn-warning','btn btn-success','btn btn-danger'],

        // select new class name first so it isn't changed on every iteration (if you use each)
        oldClass = this.className,
        newClass = classes[($.inArray(oldClass, classes)+1)%classes.length];

    // this method keeps all other classes untouched (e.g. dropdown-toogle)
    $([this, this.nextElementSibling])
        .removeClass(oldClass)
        .addClass(newClass);
});

//// SELECT ////
// add a click listener to every a element
$(".btn-group").each(function () {
    var classes = ['btn-info','btn-warning','btn-success','btn-danger'],
        buttons = $(this).children("button");

    $(this).find("a").each(function (index) {

        $(this).click(function () {

            // use the a elements index to get the right array element
            var newClass = classes[index];

            $(buttons)
                .removeClass(classes.join(' '))
                .addClass(newClass);
        });
    });
});

此外，您可以在此处查看实时演示：http://jsfiddle.net/b9e3ossu/1/

希望这有所帮助 :)

- Alex