php - 如何正确使用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 网络应用程序。这是纯 JS、HTML 和 CSS 无法实现的。