when clicked again, I want the color to be gone.(like/hate button, every thing works but if i click like button twice I want the color to be gone)

so I have two like and hate buttons. It almost works as I want, when I click the button like it turns blue. if I click hate then the button hate turns blue while the button like goes back to its original state. But only problem is if I click "like" twice, then the like button should go back to its original state. I don't know how to achieve this task.

I currently have this,

<span class="thumb" style="padding-right:7px;"><a href="/post/{{ post.slug }}/vote?is_up=1" class="vote"><i class="fa fa-thumbs-o-up"></i>like</a></span>   
<span class="thumb"><a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote"><i class="fa fa-thumbs-o-down"></i>dislike</a></span>
<script>
$(".thumb a").click(function(e) {
  var target = $(e.target);
  e.preventDefault();
  $('.vote').removeClass('red blue')
  if (target.text() == 'love') {
    target.addClass('red');
  } else {
    target.addClass('blue');
  }
});
</script>

what am I doing wrong here?

Answers 1

  • $(".thumb a").click(function(e) {
        var target = $(e.target);
        e.preventDefault();
        if (target.hasClass('blue')) {
            $('.vote').removeClass('blue');
        } else {
            $('.vote').removeClass('blue');
            target.addClass('blue');
        }
    });
    

Related Articles