单击图标切换颜色答案

【问题标题】：Toggle color on click of icon单击图标切换颜色
【发布时间】：2016-03-14 15:05:34
【问题描述】：

我有两个可以切换颜色的箭头（向上和向下）。这很好用，除了我有一些问题。

当再次单击箭头时，我希望颜色恢复到原来的颜色，但在我单击另一个箭头之前，它会保持更改后的颜色。
我对这些箭头进行循环，例如，如果我有两组箭头（两个向上和两个向下），当我操作一组箭头时，另一组又回到原来的状态。
即使已注销的用户单击箭头，颜色仍然会发生变化。

有人可以帮我实现上述目标吗？

这就是我现在拥有的。

 <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>

【问题讨论】：

你能为此做一个小提琴吗？
stackoverflow.com/questions/35909265/…
您可以使用.toggleClass()在点击时切换css类。api.jquery.com/toggleclass

标签： javascript jquery

【解决方案1】：

使用选定和未选定的字形图标颜色创建 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/

【讨论】：

非常感谢，我唯一的问题是我希望当我刷新页面时，被点击的箭头仍然是彩色的。我想我需要为此使用 cookie 但不起作用...我可以告诉你我做了什么，你也知道 cookie 吗？
你可以使用本地存储或cookies
是的，我现在正在尝试研究 cookie，因为您可能会说我是一个超级初学者，所以不知道什么以及如何使用 cookie
我现在正在从其他来源学习tangowithdjango.com/book/chapters/cookie.html
我首先学习了 django，并开始在我的 django 项目中使用 js，所以我查看了那个源。感谢您的链接。顺便说一句，你能再帮帮我吗；）stackoverflow.com/users/6050147/em-four?tab=questions

【解决方案2】：

使用 .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>

【讨论】：