jQuery 通过 Twitter Bootstrap 按钮切换类

Question

场景

我希望用户能够在单击按钮的主要部分（为了快速）时使用 jQuery 切换 Twitter Bootstrap 按钮 classes。

或

允许用户从下拉菜单中select一个状态。

无论 select 状态如何，整个 btn-group 应该有相同的按钮 class。

未开始 (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];
  });
});

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/

希望对您有所帮助:)。

jQuery 通过 Twitter Bootstrap 按钮切换类

jQuery toggle through Twitter Bootstrap button classes

javascript

css

jquery

twitter-bootstrap

jQuery 通过 Twitter Bootstrap 按钮切换 类

jQuery toggle through Twitter Bootstrap button classes

javascript

css

jquery

twitter-bootstrap

jQuery 通过 Twitter Bootstrap 按钮切换类