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($) {&nbsp; $('#swapFire').on('click', function() {&nbsp; &nbsp; var $el = $(this),&nbsp; &nbsp; &nbsp; textNode = this.lastChild;&nbsp; &nbsp; $el.find('span').toggleClass('glyphicon-fire glyphicon-tint');&nbsp; &nbsp; $el.toggleClass('btn-primary btn-danger');&nbsp; &nbsp; $el.toggleClass('showFire');&nbsp;&nbsp; });});.btn {&nbsp; 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">&nbsp; &nbsp; <span class="glyphicon glyphicon-fire"></span> Gimme Fire</button>

Answer 2

您还必须切换 btn-primary 然后它会更改背景颜色&nbsp; &nbsp; jQuery(function ($) {&nbsp; &nbsp; &nbsp; &nbsp; $('#swapFire').on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $el = $(this),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textNode = this.lastChild;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $el.find('span').toggleClass('glyphicon-fire glyphicon-tint');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $el.toggleClass('btn-primary btn-success');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $el.toggleClass('showFire');&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });.btn {&nbsp; 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">&nbsp; &nbsp; <span class="glyphicon glyphicon-fire"></span> Gimme Fire</button>