应用于所有内容的jQuery.addClass

Question

我有一个类似的按钮，它使用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元素。我如何将其应用于类似按钮

完整代码：

<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>

Answer 1

您当前的目标是页面上的每个'.like btn'，也针对每个<i>。正如在另一个答案中所提到的，您可以使用jQuery的.find(选择器(来针对现有的<i>标签(而不是预先准备它(，并使用removeClass/addClass组合来简化您的代码

$(document).ready(function() {
$(".like-btn").click(function(e) {
e.preventDefault()
let this_ = $(this)
let is_liked = this_.find('i').hasClass('fa-heart');
let cur_likes = +this_.find('span').text()
if (is_liked) {
this_.find('i').removeClass('fa-heart').addClass('fa-heart-o');
this_.find('span').text(cur_likes-1);
} else {
this_.find('i').removeClass('fa-heart-o').addClass('fa-heart');
this_.find('span').text(cur_likes+1);
}
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o "></i> <span>5</span></a>
<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o"></i> <span>9</span></a>
<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o"></i> <span>12</span></a>

Answer 2

当您单击.like-btn时，它包含i标记，为什么要在success中重试$(".like-btn").prepend("<i></i>");？由于您已将$(this)存储在this_变量中，因此可以通过this_.find('i')和success方法轻松获得目标i，然后尝试从所选i中添加或删除类。