如何保持按钮的颜色，当点击和刷新页面 [英] how to stay the color of the button when hit like and refresh page

问题描述

我喜欢的按钮的默认颜色是灰色的，当用户点击按钮时，它会运行togglepostlike，颜色将变为红色。如果用户像按钮一样点击，我使用ajax插入数据。 ..如果用户再次点击类似的按钮，当它的红色时，它会运行togglepost不喜欢，我的数据库中的数据将被删除..

按钮就像

 < div class =boxcoracao> 
< span class =coracaoname =like>< br>& emsp;& emsp& emsp; Love< / span> 
< / div> 
  

jquery函数

 <脚本> 
 $（。like）。click（function（）{
 $（'。boxcoracao .coracao'，this）.toggleClass（ativo）; 
 var lpid = $（这个）.closest（div＃buttons）。find（＃likepid）.val（）; 
 var lmid = $（this）.closest（div＃buttons）。find（＃likemid ）.val（）; 
 if（$（'。boxcoracao .coracao'，this）.hasClass（ativo））{
 //更新文字以显示下一次点击
 togglePost（like，lpid，lmid）; //运行函数
 alert（succes）; 
} else {
 //更新文本以显示下一次点击将是
 togglePost（dislike，lpid，lmid）; //运行函数
 alert（failed）; 
} 
 
 
 
函数togglePost（action，lpid，lmid）{
 
 $ .ajax（{
类型：post，
 url：../controller/ like_controller.php，
 data：action =+ action +& postid =+ lpid +& postmember =+ lmid，
 success：function（data）{
 window .location.reload（）; 
}，
错误：函数（e）{
 alert（请再试一次...）; 
} 
}）; 
} 
 
}）; 
< / script> 
  

这里是我的 sql查询 ....

 函数UpdateLikes（$ postid，$ postmember，$ likeid，$ action）{
 
 if（$ action ==不喜欢）{
 $ sql =从plike删除WHERE pl_puid ='$ postid'AND pl_uid ='$ likeid'; 
 var_dump（$ sql）; 
 $ result = $ this-> dbh-> prepare（$ sql）; 
 $ result-> execute（）; 
返回$ result-> rowCount（）？真假; 
} else {
 //在插入之前，您可能需要先检查他们是否喜欢再次加入他们的计数。 
 $ 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）; 
返回$ result; 
} 
 
} 
  

这里是gif按钮..

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

解决方案

你必须做一些Ajax来保存你的状态数据库或文件系统上的一些缓存。

如果你想要的东西不那么健壮，你可以将状态保存在cookie或本地存储中。或者甚至不太持久：在会话变量中，一旦浏览器会话丢失，该变量就会消失。然后，当请求页面检查数据库，缓存，cookie，会话或其他任何状态时，检查你的状态是否存在，并在HTML中给这个按钮相应的类。

例如，如果您使用PHP，可以这样做：

 <？php 
 $ buttonClasses = ['coracao']; 
 $ didLike = your_read_from_cache_function（）; 
 
 if（$ didLike）
 $ buttonClasses [] ='ativo'; 
？> 
< div class =boxcoracao> 
< span class =<？= implode（''，$ buttonClasses）？> NAME = 像 ><峰; br>&安培; EMSP;&安培; EMSP;&安培; EMSP;爱与LT; /跨度> 
< / div> 
  

the default color of my like button is gray and when user hit like button it will run the togglepost "like" and the color will change to red.. i use ajax to insert the data if the user hit like the button... and if the user hit the like button again when its red it will run the togglepost "dislike" and the data from my db will be removed..

button like

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

jquery function

<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>

here is my sql query....

    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;
        }

  }

here is the gif button..

but my problem is when a user hit the like button and refresh the page the like button will reset to gray instead of red..any idea on how to solve this?.. when user hit like it will be red and when user refresh the page the button will still be red unless the user hit the button again to unlike?..

解决方案

You'd have to do some Ajax to save the state in your database or some cache on the filesystem for example.

If you want something less robust, you could save the state in a cookie or localstorage. Or even less persistent: in a session variable, that will be gone once the Browser session is lost.

Then when the page is requested check against the presence of your state in database, cache, cookie, session or whatever and give the button the corresponding class in your HTML.

If you are using PHP, for example, it could be done like so:

<?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>

这篇关于如何保持按钮的颜色，当点击和刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！