javascript - jQuery中的喜欢和不喜欢按钮
问题描述
我尝试在 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);
});
它工作正常,但是如果我在单击一个按钮的同时单击另一个按钮,我该怎么做才能取消单击另一个按钮?
解决方案
尝试这个。
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>
推荐阅读
- spring - (Spring/JpaRepository)动态@Query,当从BaseEntityRepository继承JpaRepository的方法到SubEntityRepository时
- swift - 使用从左到右的推送视图控制器创建相反的过渡
- ssl - OpenSSL 自签名证书完全被阻止
- python - 如何卸载烧瓶较大的应用程序包?
- css - 如何在 material-ui 中使用 makeStyles 和 useStyles 覆盖类?
- reactjs - 在步进器组件中传递复选框状态
- paypal - 将捐款金额传递到 PayPal 页面
- git - Windows Jenkins 管道 git 命令子模块更新传递凭据
- r - 如何创建多个箱线图,同时使用 ggplot2 中的 geom_boxplot 使它们成比例?
- r - 用于分类的随机森林树