Question

方案

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

或者

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

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

未开始（ btn-info ），正在进行中（ btn-warning ），已完成（ btn-success ）和延迟（< EM> BTN-误差的）。

我想要什么

Buttons

到目前为止我有什么

这是我的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按钮类

1 个答案: