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 ifif语句。如果要在两个类之间切换，只要在标记中分配一个类，就可以使用$（selector）.toggleClass（＆＃39; firstclass secondclass＆＃39;）。（http://api.jquery.com/toggleclass/）

jQuery看起来像这样：

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

示例：

https://jsfiddle.net/xsotp27s/

Answer 2

您可以使用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');
         }

     })
 })

最终代码：

＆＃13;

<!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>

＆＃13;

Answer 3

只需切换这样的类：

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

Answer 4

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

切换jquery的类功能将帮助您满足此需求。

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

如何在onClick上的bootstrap按钮类之间切换？

4 个答案: