如何在 onClick 引导按钮类之间切换？答案

【问题标题】：How to toggle between bootstrap button classes onClick?如何在 onClick 引导按钮类之间切换？
【发布时间】：2017-01-02 03:54:51
【问题描述】：

我正在使用 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');
    }
    });

我对此很陌生，所以任何帮助将不胜感激！

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

你可以使用hasClass方法：

$(document).ready(function() {

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

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

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

     })
 })

最终代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .btn-success {background-color: red}
        .btn-default {background-color: blue}
    </style>
</head>
<body>
    <button id="critical_btn" class="btn-default">Button</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
     $(document).ready(function() {

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

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

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

         })
     })
    </script>
</body>
</html>

【讨论】：

【解决方案2】：

只需像这样切换类：

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

【讨论】：

【解决方案3】：

而不是做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/

【讨论】：

【解决方案4】：

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

jquery 的切换类功能将帮助您解决这个需求。

http://api.jquery.com/toggleclass/

【讨论】：