javascript - Bootstrap 和 JavaScript 按钮更改具有背景颜色的图标
问题描述
我试图更改带有背景颜色的图标出现在点击事件上,但背景颜色没有改变。有什么解决方案吗?这是我的代码
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>
解决方案
添加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>
推荐阅读
- python-requests - 如何获取我发送的 request.post 字符串?
- android - Android Chrome Lite 模式破坏了我们的网站。停用 Javascript。(谷歌浏览器数据保护程序)
- batch-file - 使用空格和特殊字符获取函数参数的正确方法
- javascript - 单独禁用按钮
- amazon-web-services - 我可以在 community.aws.ec2_vpc_route_table Ansible 模块中使用 group_vars/all.yml 吗?
- sql - 使用 SQL 中的选择查询/子查询中的值更新字段
- r - 在远程 SSH 中运行 vscode-r 是否需要任何额外的设置?
- java - 我的 Java 桌面应用程序应该在哪里缓存其下载的资产?
- html - 使用破折号/绘图将背景图像添加到仪表板会清除内容
- json - 带有 jq 的模糊匹配字符串