javascript - 如何在点击喜欢和刷新页面时保持按钮的颜色

Question

我的“赞”按钮的默认颜色是灰色，当用户点击“赞”按钮时，它会运行 togglepost“赞”并且颜色将变为红色。如果用户点击“赞”按钮，我使用 ajax 插入数据。 ..如果用户在它的红色时再次点击喜欢按钮，它将运行切换帖子“不喜欢”并且我的数据库中的数据将被删除..

按钮喜欢

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

jquery 函数

<script>
$(".like").click(function(){ 
   $('.boxcoracao .coracao',this).toggleClass("ativo");
   var lpid = $(this).closest("div#buttons").find("#likepid").val();
   var lmid = $(this).closest("div#buttons").find("#likemid").val();
  if ($('.boxcoracao .coracao',this).hasClass("ativo")){  
  // update the text to show what the next click would be
    togglePost("like", lpid, lmid); // run function 
    alert("succes");
  } else {
   // update the text to show what the next click would be
    togglePost("dislike", lpid, lmid); // run function
     alert("failed");
  }



function togglePost(action,lpid,lmid){

  $.ajax({
        type: "post",
        url: "../controller/like_controller.php",
        data: "action="+action+"&postid="+lpid+"&postmember="+lmid,
        success: function(data){
          window.location.reload();
        },
        error: function(e){
         alert("please try again...");
        }
      });
 }

}); 
</script>

这是我的sql查询....

    function UpdateLikes($postid, $postmember, $likeid, $action){

        if ($action == "dislike"){
         $sql = "DELETE FROM plike WHERE pl_puid = '$postid' AND pl_uid = '$likeid'";
            var_dump($sql);
        $result = $this->dbh->prepare($sql);
        $result->execute();
        return $result->rowCount() ? true : false;
        } else{
        // before inserting you might want to check if they alredy liked or not before adding their count again.
        $query = "INSERT INTO plike SET pl_puid='$postid',pl_memid='$postmember',pl_uid='$likeid'";
            $query = $this->dbh->prepare($query);
            var_dump($query);
            $result = ($query->execute() ? true : false);
            return $result;
        }

  }

这是 gif 按钮..

但我的问题是，当用户点击“赞”按钮并刷新页面时，“赞”按钮将重置为灰色而不是红色..知道如何解决这个问题吗？..当用户点击“赞”时它会变成红色，什么时候用户刷新页面按钮仍然是红色的，除非用户再次点击按钮来取消关注？..

Answer 1

例如，您必须执行一些 Ajax 操作以将状态保存在数据库中或文件系统中的一些缓存中。

如果您想要不那么健壮的东西，您可以将状态保存在 cookie 或本地存储中。或者更不持久:在 session 变量中，一旦浏览器 session 丢失，它就会消失。

然后，当页面被请求时，检查你的状态是否存在于数据库、缓存、cookie、 session 或其他任何东西中，并在你的 HTML 中为按钮提供相应的类。

例如，如果您使用的是 PHP，则可以这样做:

<?php
$buttonClasses = ['coracao'];
$didLike = your_read_from_cache_function();

if ($didLike)
    $buttonClasses[] = 'ativo';
?>
<div class="boxcoracao">
    <span class="<?= implode(' ', $buttonClasses) ?>" name="like"><br>&emsp;&emsp;&emsp;Love</span>
</div>