首頁猿問 Bootstrap 和...

Bootstrap 和 JavaScript 按鈕更改帶有背景顏色的圖標

JavaScript

幕布斯7119047 2023-10-20 16:40:03

我嘗試更改單擊事件上顯示的背景顏色圖標，但背景顏色未更改。有什么解決辦法嗎？這是我的代碼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>

查看完整描述

2 回答

慕勒3428872

TA貢獻1848條經驗獲得超6個贊

添加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;

}

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

</button>

反對回復 2023-10-20

慕田峪9158850

TA貢獻1794條經驗獲得超8個贊

您還必須切換 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;

}

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

</button>

反對回復 2023-10-20

2 回答
0 關注
199 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Bootstrap 和 JavaScript 按鈕更改帶有背景顏色的圖標

Bootstrap 和 JavaScript 按鈕更改帶有背景顏色的圖標

2 回答

添加回答