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>

jQuery中的“喜欢”和“不喜欢”按钮

1 个答案: