javascript - jQuery 中的喜欢和不喜欢按钮

Question

我尝试在 jquery 中使用基本的切换功能制作一个喜欢和不喜欢的按钮，如下所示:

    $('.rating-button').click(function () {
        var f = !$(this).data("toggleFlag");
        if (f) {
            $(this).removeClass('text-white').addClass('text-dark')
        } else {
            $(this).removeClass('text-dark').addClass('text-white')
        }
        $(this).data("toggleFlag", f);
    });

它工作正常，但是如果我在单击一个按钮的同时单击另一个按钮，我怎样才能使另一个按钮取消单击？

Example gif

Answer 1

试试这个。

var likeEl = $('.like');
let likeSpanEl = likeEl.find('span');
var dislikeEl = $('.dislike');
let dislikeSpanEl = dislikeEl.find('span');

$('.rating-button').click(function() {

  // remove all selected class
  $('.rating-button').removeClass('selected');

  if ($(this).hasClass('dislike')) {
    changeLikes();
    changeDisLikes(true);
  } else {
    changeLikes(true);
    changeDisLikes();
  }
  // add selected to current el
  $(this).addClass('selected');
});

function changeLikes(add) {
  let likes = parseInt(likeSpanEl.text());
  $(likeSpanEl).text(add ? likes + 1 : likes - 1);
}

function changeDisLikes(add) {
  let dislikes = parseInt(dislikeSpanEl.text());
  $(dislikeSpanEl).text(add ? dislikes + 1 : dislikes - 1);
}

.container {
  display: flex;
}

.rating-button {
  border-bottom: 1px solid blue;
  padding-bottom: 0.5em;
}

.rating-button:hover {
  cursor: pointer;
}

.like,
.dislike {
  font-weight: bold;
}

.dislike {
  padding-left: 2em;
}

icon {
  margin-right: 0.1m;
}

.selected {
  color: blue;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="container">
  <div class="like rating-button selected">
    <icon></icon>
    <span>10</span>
  </div>
  <div class="dislike rating-button">
    <icon></icon>
    <span>20</span>
  </div>

</div>