使用jQuery切换点赞按钮Font Awesome图标时图标消失如何解决

你调用btn.text()方法会直接覆盖按钮内的全部内容，包括嵌套的Font Awesome心形<i>标签，所以点击后图标会被清空。

直接调整你的jQuery代码即可，同时增加图标类切换逻辑：

$(document).ready(function(){
    function updateText(btn, newCount, verb){
        // 保留原有图标元素，仅更新后续文本
        const heartIcon = btn.find('i.like-heart')
        btn.html(heartIcon).append(` ${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
        if (likeUrl){
            $.ajax({
                url: likeUrl,
                method: "GET",
                data: {},
                success: function(data){
                    console.log(data)
                    if (data.liked){
                        updateText(this_, data.likescount, "like")
                        // 切换为实心心形
                        this_.find('i.like-heart').removeClass('fa-heart-o').addClass('fa-heart')
                    } else {
                        updateText(this_, data.likescount, "unlike")
                        // 切换为空心心形
                        this_.find('i.like-heart').removeClass('fa-heart').addClass('fa-heart-o')
                    }
                    // 同步更新data-likes属性值
                    this_.attr("data-likes", data.likescount)
                }, error: function(error){
                    console.log(error)
                    console.log("error")
                }
            })
        }       
    })
})

把点赞计数单独嵌套在<span>标签里，后续修改不会涉及图标元素：

修改后的HTML代码 #

<a class="like-btn" data-href='{{ post.get_api_like_url }}' data-likes="{{ post.likes.count }}" href="{{ post.get_like_url }}">
    <i class="fa fa-heart-o like-heart" aria-hidden="true"></i>
    <span class="like-count">{{ post.likes.count }}</span>
</a>

对应简化的updateText逻辑 #

function updateText(btn, newCount, verb){
    btn.find('.like-count').text(`${newCount} ${verb}`)
}

内容的提问来源于stack exchange，提问作者Wazy