单击图标时切换颜色
Toggle color on click of icon
我有两个箭头(向上和向下)可以切换颜色。这很好用,除了我有一些问题。
-
当再次单击箭头时,我希望颜色恢复为原始颜色,但在我单击另一个箭头之前,它保持更改的颜色。
-
我循环这些箭头,例如,如果我有两组箭头(两组向上和两次向下),当作一组箭头时,另一组将返回到其原始状态。
-
即使注销用户单击箭头,颜色仍然会发生变化。
有人可以帮助我实现上述目标吗?
这就是我现在所拥有的。
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
<br />
<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br>
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
<script>
$(document).ready(function(){
$('.glyphicon').click(function(){
$('.glyphicon').css('color', '#333');
$(this).css('color', '#16A085');
});
});
</script>
使用选定和未选择的字形颜色创建 CSS 类:
.selected {
color:#16A085;
}
.not-selected {
color:#333;
}
将链接包装在div 中
<div class="votes">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
<br />
<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br>
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>
.js:
$(document).ready(function(){
$('.glyphicon').click(function(e){
e.preventDefault();
$(this).closest('.votes').find('.glyphicon').not(this).removeClass('selected').toggleClass('not-selected');
$(this).removeClass('not-selected').toggleClass('selected');
});
});
https://jsfiddle.net/duuu4c60/
使用 .hasClass() 检查
$('.btn').bind('click',function(){
if($('.btn i').hasClass('text-danger')){
$('.btn i').removeClass('text-danger').next().html('');
}else{
$('.btn i').addClass('text-danger').next().html(' 1');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="text-center" style="font-size:24px">
<h3>Sample</h3>
<button class="btn btn-lg"><i class="glyphicon glyphicon-hand-up"></i><span></span></button>
</div>
相关文章:
- 使用Angular单击时更改特定图示符图标的颜色
- 在文本框中键入时使用jQuery更改图标的颜色
- 动态更改jQuery移动图标的背景颜色
- 活动页面链接图标颜色
- 如何在引导程序中更改字形图标的内部颜色
- 单击图标时切换颜色
- 如何在 gmap v3 中对图标使用自定义颜色
- 悬停时使脸书图标反转颜色
- 更改手风琴鼠标悬停的颜色和工具图标的颜色
- 使用HTML5 Canvas进行图标颜色屏蔽
- 如何改变图标或图标的颜色在剑道ui网格过滤器
- 如何在jquery中改变引导图标的颜色
- 在一组图标之间循环使用颜色
- 使用CSS或JavaScript更改SVG图标颜色
- 使字体awesome图标改变颜色时,选择菜单的变化
- 移动浏览器中图标颜色不改变
- 动态改变颜色的GoogleMap图标/标记
- 在日期时间选择器下拉小部件中更改字形图标的颜色
- 使用jquery更改鼠标上css3图标的颜色
- 在Jquery中更改文本时更改字形图标的颜色