【发布时间】：2022-01-20 13:50:14
【问题描述】：
我有一个使用 jQuery 的点赞按钮。点赞按钮按预期工作，但是由于我设置它的方式，它会将页面上的每个图标更改为心脏
代码：
if (data.liked) {
updateText(this_, data.likescount, "")
$(".like-btn").prepend("<i></i>");
$("i").addClass("fa fa-heart-o liked-heart"); //problem line
} else {
updateText(this_, data.likescount, "")
$(".like-btn").prepend("<i></i>");
$("i").addClass("fa fa-heart-o unliked-heart"); //problem line
从我用户的角度来看，问题是我将fa fa-heart-o ... 类附加到所有i 元素。我怎样才能把它应用到like按钮上
完整代码：
<script>
$(document).ready(function(){
function updateText(btn, newCount, verb){
btn.text(newCount + " " + verb)
}
$(".like-btn").click(function(e){
e.preventDefault()
var this_ = $(this)
var likeUrl = this_.attr("data-href")
var likeCount = parseInt(this_.attr("data-likes")) | 0
var addLike = likeCount + 1
var removeLike = likeCount - 1
if (likeUrl){
$.ajax({
url: likeUrl,
method: "GET",
data: {},
success: function(data){
console.log(data)
var newLikes;
if (data.liked){
updateText(this_, data.likescount, "")
$(".like-btn").prepend("<i></i>");
$( "i" ).addClass( "fa fa-heart-o liked-heart" );
} else {
updateText(this_, data.likescount, "")
$(".like-btn").prepend("<i></i>");
$( "i" ).addClass( "fa fa-heart-o unliked-heart" );
}
}, error: function(error){
console.log(error)
console.log("error")
}
})
}
})
})
</script>
<a class="like-btn" data-href='{{ post.get_api_like_url }}' data-likes="{{ post.likes.count }}" href="{{ post.get_like_url }}"><i class="{% if userliked %}fa fa-heart-o liked-heart{% else %}fa fa-heart-o unliked-heart{% endif %}" aria-hidden="true"></i>{{ post.likes.count }}</a>
更新：图标更新和文本更新都单独工作。但是，当我将它们放在一起时，当我单击点赞按钮时，它会更新点赞号码但会删除图标
<script>
$(document).ready(function(){
function updateText(btn, newCount, verb){
btn.text(newCount + " " + verb)
}
$(".like-btn").click(function(e) {
e.preventDefault()
let this_ = $(this)
var likeUrl = this_.attr("data-href")
var likeCount = parseInt(this_.attr("data-likes")) | 0
var addLike = likeCount + 1
var removeLike = likeCount - 1
if (likeUrl){
$.ajax({
url: likeUrl,
method: "GET",
data: {},
success: function(data){
console.log(data)
var newLikes;
let is_liked = this_.find('i').hasClass('fa-heart');
if (is_liked){
this_.find('i').removeClass('fa-heart').addClass('fa-heart-o');
updateText(this_, data.likescount, "")
} else {
this_.find('i').removeClass('fa-heart-o').addClass('fa-heart');
updateText(this_, data.likescount, "")
}
}, error: function(error){
console.log(error)
console.log("error")
}
})
}
})
})
</script>
最终工作代码：
<script>
$(document).ready(function(){
function updateText(btn, newCount, verb){
btn.text(newCount + " " + verb)
}
$(".like-btn").click(function(e) {
e.preventDefault()
let this_ = $(this)
var likeUrl = this_.attr("data-href")
var likeCount = parseInt(this_.attr("data-likes")) | 0
var addLike = likeCount + 1
var removeLike = likeCount - 1
if (likeUrl){
$.ajax({
url: likeUrl,
method: "GET",
data: {},
success: function(data){
console.log(data)
var newLikes;
let is_liked = this_.find('i').hasClass('fa fa-heart liked-heart');
let cur_likes = +this_.find('span').text()
if (is_liked){
this_.find('i').removeClass('fa fa-heart liked-heart').addClass('fa fa-heart-o unliked-heart');
this_.find('span').text(cur_likes-1);
} else {
this_.find('i').removeClass('fa fa-heart-o unliked-heart').addClass('fa fa-heart liked-heart');
this_.find('span').text(cur_likes+1);
}
}, error: function(error){
console.log(error)
console.log("error")
}
})
}
})
})
<a class="like-btn" data-href='{{ post.get_api_like_url }}' data-likes="{{ post.likes.count }}" href="{{ post.get_like_url }}"><i class="{% if userliked %}fa fa-heart liked-heart{% else %}fa fa-heart-o unliked-heart{% endif %}" aria-hidden="true"></i> <span>{{ post.likes.count }}</span></a>
【问题讨论】：
标签： javascript jquery django