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>