jquery - 如何在 bootstrap 按钮类 onClick 之间切换？

Question

我正在使用 Bootstrap 按钮并希望它们在单击时改变颜色。例如，按钮最初是灰色的(btn-default)，点击后应该变为绿色(btn-success)。我希望按钮在再次单击时变回默认类。到目前为止，我已经创建了一个 if 语句并添加了以下代码，但是它只改变了一次颜色，再次单击时不会返回到默认类。

$("#critical_btn").click(function () {

    if (this.class= 'btn-default'){
        $('#critical_btn').removeClass('btn-default').addClass('btn-success ');
        $(this).addClass('btn-success').removeClass('btn-default');
    }
    else if (this.class= 'btn-success'){
        $('#critical_btn').removeClass('btn-success').addClass('btn-default ');
        $(this).addClass('btn-default').removeClass('btn-success');
    }
    });

我对此很陌生，所以非常感谢任何帮助!

Answer 1

而不是做 if elseif 语句。如果你想在两个类之间切换，你可以使用 $(selector).toggleClass('firstclass secondclass') 只要它们中的一个将在标记中分配。 ( http://api.jquery.com/toggleclass/ )

jQuery 看起来像这样:

$("#critical_btn").click(function() {
  $(this).toggleClass('btn-default btn-success');
});

例子:

https://jsfiddle.net/xsotp27s/