Question

我喜欢按钮的默认颜色是灰色，当用户点击按钮时，它将运行togglepost“like”，颜色将变为红色..如果用户按下按钮，我会使用ajax插入数据。 ..如果用户再次按下“喜欢”按钮，它的红色将运行toggle“to dislike”，我的数据库中的数据将被移除..

按钮

<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按钮..

但我的问题是，当用户点击类似按钮并刷新页面时，like按钮将重置为灰色而不是红色..如何解决此问题的任何想法？..当用户点击时它将是红色的，当用户刷新页面按钮仍然是红色，除非用户再次按下按钮不同？...

Answer 1

例如，您必须执行一些Ajax来保存数据库中的状态或文件系统上的某些缓存。

如果您想要不那么健壮的东西，可以将状态保存在cookie或localstorage中。或者甚至更少持久性：在会话变量中，一旦浏览器会话丢失就会消失。

然后，当请求页面时，检查数据库，缓存，cookie，会话或其他内容中是否存在您的状态，并在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>

点击时如何保持按钮的颜色并刷新页面

1 个答案: