如何保持按钮的颜色，当点击和刷新页面

我喜欢按钮的默认颜色是灰色，当用户像按钮一样击中它将运行togglepost“喜欢”，颜色将变成红色..我使用Ajax插入数据，如果用户点击按钮...并且如果用户再次点击类似按钮时，它的红色将运行togglepost“不喜欢”，从我的数据库中的数据将被删除..如何保持按钮的颜色，当点击和刷新页面

按钮等

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

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

来源

2017-04-04 Lion Smith

。你确定你这么做吗？因为我没有看到你发布的代码中发生过这种情况。 – Rehan

是的先生....我这样做我有ajax保存数据到我的数据库我只是没有包括它在我的文章，但喜欢和不同的是保存在我的数据库..我唯一的问题是当我刷新/重新加载页面按钮变灰，即使我已经打了像按钮.. –

如果是这样的话，那么你一定是做错了'ajax'告诉我们'ajax'来帮助你更好。 – Rehan

你必须做一些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>

当用户点击该按钮一样，你将需要更新其数据库上

来源

2017-04-04 08:08:46 Mary

我已经做了它不只是包括在我的文章，但保存部分完成，但剩下的唯一问题是，当我点击按钮和重新加载页面据说该按钮变成红色，但不是它变成灰色，当我重新加载页面。 –

我更新了我的答案。当然，您必须从函数中的数据库读取数据，并确定用户是否已经“喜欢” - 相应地在示例中替换“your_read_from_cache_function（）”。 – Mary

你可以举例说明your_read_from_cache_function？基于我的职位上面？ –

如何保持按钮的颜色，当点击和刷新页面

回答

相关问题