使用 Javascript 切换图标答案

【问题标题】：Toggle icon on Like with Javascript使用 Javascript 切换图标
【发布时间】：2018-09-16 08:24:44
【问题描述】：

我制作了一个由 ajax 提供支持的类似按钮，并且我定义了一个刷新文本的函数。现在我想将其更改为从 font awesome fa-heart-o 更新为 fa-heart ，反之亦然。我该怎么做？看下面的代码

base.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 %}

感谢您的帮助。

【问题讨论】：

标签： javascript python html django frontend

【解决方案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)
}

【讨论】：

感谢您的回答，但是当我单击它时，它看起来像未定义而不是图标心。我也尝试删除 updateText(this_, addLike) 但它不起作用。
点击后能否检查元素并查看其中有哪些类？
更新了我的答案，类名中有一些空格可能是导致此问题的原因。
是的，类是class="like-btn"，在里面
抱歉，您能分享您检查过的 HTML 的屏幕截图吗？谢谢。

【解决方案2】：

这里是屏幕图片，类如-btn

【讨论】：