简体   繁体   English

更改 jquery 中的字体真棒图标

[英]change font awesome icon in jquery

I have a like button that users jQuery.我有一个用户 jQuery 的赞按钮。 I want to change the icon based on the like status(outlined heart to filled heart).我想根据喜欢的状态更改图标(从轮廓的心到填充的心)。 The issue is when I click like it clears removes the icon问题是当我单击它清除删除图标时

pre like:预喜欢:

在此处输入图像描述

post like:像这样的帖子:

在此处输入图像描述

How do I stop it from clearing the icon while still updating the like count, as well as changing the icon class如何阻止它清除图标,同时仍更新点赞数,以及更改图标 class

jQuery: jQuery:

<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")                       
                        
              } else {
                  updateText(this_, data.likescount, "unlike")
    
              }
           }, error: function(error){
             console.log(error)
             console.log("error")
           }
         })
       }       
     })
 })
</script>  

like button:喜欢按钮:

<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>{{ post.likes.count }}  </a>
             if (data.liked){
              updateText(this_, data.likescount, "")
              $(".like-btn").prepend("<i></i>")
              $( "i" ).addClass( "fa fa-heart-o like-heart" );                  
                    
          } else {
              updateText(this_, data.likescount, "")
              $(".like-btn").prepend("<i></i>")
              $( "i" ).addClass( "fa fa-heart-o like-heart" );       

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM