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);
});

它工作正常，但是如果我单击一个按钮而单击另一个按钮，另一个按钮取消单击，我该怎么做呢？

示例动图

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>