Bootstrap 和 JavaScript 按钮更改带有背景颜色的图标

Question

我尝试更改单击事件上显示的背景颜色图标，但背景颜色未更改。有什么解决办法吗？这是我的代码jQuery(function($) {  $('#swapFire').on('click', function() {    var $el = $(this),      textNode = this.lastChild;    $el.find('span').toggleClass('glyphicon-fire glyphicon-tint');    $el.toggleClass('showFire');   });});.btn {  margin: 20px;}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><button id="swapFire" class="btn btn-primary showFire">    <span class="glyphicon glyphicon-fire"></span> Gimme Fire</button>

Answer 1

添加Toggle class

$el.toggleClass('btn-primary btn-danger');

jQuery(function($) {

  $('#swapFire').on('click', function() {

    var $el = $(this),

      textNode = this.lastChild;

    $el.find('span').toggleClass('glyphicon-fire glyphicon-tint');

    $el.toggleClass('btn-primary btn-danger');

    $el.toggleClass('showFire');

 

  });

});

.btn {

  margin: 20px;

}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<button id="swapFire" class="btn btn-primary showFire">

    <span class="glyphicon glyphicon-fire"></span> Gimme Fire

</button>

Answer 2

您还必须切换 btn-primary 然后它会更改背景颜色

    jQuery(function ($) {

        $('#swapFire').on('click', function () {

            var $el = $(this),

                textNode = this.lastChild;

            $el.find('span').toggleClass('glyphicon-fire glyphicon-tint');

            $el.toggleClass('btn-primary btn-success');

            $el.toggleClass('showFire');

        });

    });

.btn {

  margin: 20px;

}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<button id="swapFire" class="btn btn-primary showFire">

    <span class="glyphicon glyphicon-fire"></span> Gimme Fire

</button>