Bootstrap and JavaScript button change icon with background color

Question

Im tried to change icon with background color appear on the on click event but background color not change. any solution for this? here the my code

 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

Add 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

You have to also toggle btn-primary then it changes the background color

 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>