ボタンをもう一度クリックすると色が消えてしまいます（嫌いなボタンのようにすべてのものが機能しますが、ボタンを2回クリックすると色が消えます）

Question

私は2つの好きなボタンを持っています。 青いようにボタンをクリックすると、ほとんど私が望むように動作します。嫌いをクリックすると、ボタンの嫌悪感は青色に変わり、ボタンは元の状態に戻ります。 しかし、「好き」を2回クリックすると、同じようなボタンが元の状態に戻るはずです。私はこの仕事を達成する方法を知らない。

私は現在、これを持って、

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

は、私はここで間違って何をやっていますか？

Answer 1

私の理解から、あなたのコードには「好き」と「嫌い」しかないので、「愛」は似ているはずです。そして、 'like'は赤で、 'dislike'は青でなければなりません。

$(".thumb a").click(function(e) { 
 
    var target = $(this), 
 
    active = target.is('.red, .blue'); 
 
    e.preventDefault(); 
 
    $('.vote').removeClass('red blue'); 
 
    if (!active) { 
 
    if (target.text() == 'like') { 
 
     target.addClass('red'); 
 
    } else { 
 
     target.addClass('blue'); 
 
    } 
 
    } 
 
});

.red { 
 
    background: red; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 2

$(".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'); 
    } 
});