Question

所以我有两个喜欢和讨厌的按钮。它几乎按我的意思工作，当我点击按钮时它变成蓝色。如果我点击仇恨然后按钮讨厌变成蓝色，而按钮就像回到原来的状态。但唯一的问题是，如果我点击“喜欢”两次，那么类似按钮应该回到其原始状态。我不知道如何完成这项任务。

我目前有这个，

<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

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

Answer 2

根据我的理解，'爱'应该是这样的，因为代码中只有'喜欢'和'不喜欢'。那个'喜欢'应该是红色的，'不喜欢'应该是蓝色的。

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

当再次点击时，我希望颜色消失。（喜欢/讨厌按钮，每件事都有效，但如果我点击按钮两次，我希望颜色消失）

2 个答案: