如何正确使用like系统twitter风格按钮

Question

我创建了一个类似的系统，用户可以在其中喜欢另一个用户的帖子。数据已插入到我的数据库中。我唯一的问题是，如果用户喜欢帖子，我不知道如何保持点赞按钮。因为当用户喜欢帖子并刷新页面时，按钮也会刷新/返回到不同的状态

这就是我的按钮的默认图标看起来是灰色的。当用户悬停按钮时，它会运行动画，当用户点击时它应该变成红色。但是因为当用户点击喜欢按钮时，我运行重新加载页面按钮返回灰色..我想我错过了一些东西，但我不知道该怎么做.....

CSS

.coracao{  
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png");
 height: 50px;
 width: 50px;
 background-size: 2900%;
 background-position: left center; 

  top: -30px;
  left:  0px;
  position:absolute;

}
.coracao.ativo{  
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png");
 height: 50px;
 width: 50px;
 background-size: 2900%;
 background-position: right center; 

  top: -30px;
  left:  0px;
  position:absolute;
  animation: none 0s !important;
    -moz-animation: none 0s !important;

}
.btn:hover .coracao{
animation: animationFrames 1.4s steps(28) infinite;
}

@keyframes animationFrames{ 
  100%{
background-position: -2800px ;

  }
}

我想我需要在这里做一些条件我只是不知道该怎么做...... 这是按钮

<div class="btn like"> 
    <div class="boxcoracao">
        <span class="coracao" name="like"><br>&emsp;&emsp;&emsp;Love</span>
    </div>
</div>&emsp;&emsp;&emsp;

这是我插入用户数据和帖子ID的地方

<script>
 $(".like").click(function(){ 
  if ($('.boxcoracao .coracao',this).toggleClass("ativo")){  
    togglePost("like"); // run function 
  } else {
   // update the text to show what the next click would be
    togglePost("dislike"); // run function
  }

 function togglePost(action){

  $.ajax({
        type: "post",
        url: "",
        data: "",
        success: function(data){
          window.location.reload();
        },
        error: function(e){
         alert("please try again...");
        }
      });
 }

}); 
</script>

Answer 1

当您查询所有帖子时，您还需要通过对活动用户的点赞进行联接来拉出帖子的“点赞”状态，然后根据该标志设置点赞按钮的内容。

我是你的例子，加载页面时没有 PHP 来处理页面。您所要求的是只有通过使用基于数据库内容处理页面输出的服务器端脚本才能实现的功能。

研究 PHP Web 应用程序。这是纯 JS、HTML 和 CSS 无法实现的。