переключения цвета из двух стрелок

Question

У меня есть код, который выглядит так, https://jsfiddle.net/mdwxbppd/

<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span><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> 
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span> 

Я пытаюсь добиться кнопок для переключения цвета, когда каждый из них нажата. Я попробовал это, но всякий раз, когда я обновляю страницу, цвет возвращается к исходному, когда он должен оставаться до тех пор, пока я не нажму на другую стрелку (поскольку они переключаются). Любая помощь будет высоко оценен.

Вот что я пробовал:

<script> 
$(document).ready(function(){ 
    $('.glyphicon').click(function(){ 
     $('.glyphicon').css('color', '#333'); 
     $(this).css('color', '#10fd01'); 
    }); 
}); 
</script> 

Answer 1

Я не уверен, что это то, что вы ищете, но если это так, попробуйте это:

$(document).ready(function(){ 
    if($.cookie("arrow1")){ 
     //$('#arrow1').toggleClass... or whatever 
    } 
    $('span.glyphicon').click(function(e){ 
     $.cookie(e.target.id, true); 
     //e.target.toggle class, e.target.style.color =... or whatever 
    }); 
});