logo标签列表

在点击时如何在Bootstrap按钮类之间切换？

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

我对这个相当新，所以任何帮助都将不胜感激！

4个回答
6

如果想在两个类之间切换，可以使用 $(selector).toggleClass('firstclass secondclass')，而不是使用 if elseif 语句。只要其中一个类在标记中被指定即可。（http://api.jquery.com/toggleclass/）

jQuery 代码如下：

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

Example:

https://jsfiddle.net/xsotp27s/

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>

0

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

JQuery的Toggle Class功能将帮助您满足此需求。

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

0

只需像这样切换类：

$("#critical_btn").click(function () {
   $(this).toggleClass('btn-default btn-success'); 
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接