当再次单击时，我希望颜色消失.(喜欢/讨厌按钮，一切都可以，但如果我点击两次喜欢按钮，我希望颜色消失）

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)

本文关键字：消失 喜欢 按钮 我希望 颜色 如果 两次 讨厌 单击 都可以      更新时间：2023-09-26

所以我有两个喜欢和讨厌按钮。它几乎可以随心所欲地工作，当我点击按钮时，它会变成蓝色。如果我单击"讨厌"，那么"讨厌"按钮将变为蓝色，而"喜欢"按钮将返回其原始状态。但唯一的问题是，若我点击两次"赞"，那个么"赞"按钮应该会回到它的原始状态。我不知道如何完成这项任务。

我现在有这个，

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

我在这里做错了什么？

根据我的理解，"love"应该是like，因为在您的代码中只有"like"answers"厌恶"。"喜欢"应该是红色，"讨厌"应该是蓝色。

$(".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>

$(".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');
    }
});
相关文章：