javascript - 使用 Javascript 在 Like 上切换图标

Question

我制作了一个由 ajax 驱动的点赞按钮，并且定义了一个刷新文本的函数。现在我想更改它以将字体 awesome fa-heart-o 更新为 fa-heart，反之亦然。我该怎么做？看下面的代码

基础.html

<script>
                     $(document).ready(function(){
                            function updateText(btn, newCount, iconClass, verb){
                verb = verb || "";
                $(btn).html(newCount + '<i class="' + iconClass + '"></i>' + verb )  
                     btn.attr("data-likes", newCount)
                    }

                        $(".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_, addLike, "fa fa-heart")


                                } else {
                                    updateText(this_, removeLike, "fa fa-heart-o")


                                }
                            }, error: function(error){
                                console.log(error)
                                console.log("error")
                            }
                            })
                        }

                        })
                    })

         </script>

和按钮一样的html

<a class='like-btn' data-href='{{ comentario.get_api_like_url }}' data-likes='{{ comentario.likes.count }}' 
href='{{ comentario.get_like_url }}'>{{ comentario.likes.count }}

{% if request.user in comentario.likes.all %}
    <i class="fa fa-heart"></i>
{% else %}
    <i class="fa fa-heart-o"></i>
{% endif %}

感谢您的帮助。

Answer 1

在您的成功回调中，使用 updateText 来定义元素。

示例

success: function(data) {
    console.log(data)
    var newLikes;
    if (data.liked) {
        updateText(this_, addLike, "fa fa-heart")

    } else {
        updateText(this_, removeLike, "fa fa-heart-o")
        // remove one like
    }
}, error: function(error) {
    console.log(error)
    console.log("error")
}


function updateText(btn, newCount, iconClass, verb) {
    verb = verb || "";
    $(btn).html(newCount + '<i class="fa' + iconClass + '"></i>' + verb)
    btn.attr("data-likes", newCount)
}