刷新頁面時如何使贊按鈕保持贊state

Question

我正在制作一個贊按鈕。 除非用戶刷新頁面，否則它工作得很好。 當頁面未刷新時，喜歡按鈕本身會更改樣式並在用戶單擊它時將喜歡計數添加 1。 但是當頁面刷新時，點贊按鈕保持點贊數和以前的樣式，然后將點贊數加 1，如果用戶單擊它，則更改為新樣式。 那就是問題所在。

點贊按鈕如下所示：

這是 Javascript 代碼：

function addLikes(id,action) {
    $.ajax({
    url: "like.php",
    data:'post_id='+id+'&action='+action,
    type: "POST",
    success: function(data){
    var likes = parseInt($('#likes-'+id).val());
    switch(action) {
      case "like":
      $('#like_area'+id).html('<i id="like'+id+'" class="fas fa-thumbs-up react"></i> Thích');
      $('#like_area'+id).attr("onclick", "addLikes("+id+",'unlike')");
      likes = likes+1;
      $('#like_area'+id).addClass("liked");
      break;
      case "unlike":
      $('#like_area'+id).html('<i id="like'+id+'" class="far fa-thumbs-up react"></i> Thích');
      $('#like_area'+id).attr("onclick", "addLikes("+id+",'like')");
      $('#like_area'+id).removeClass("liked");
      likes = likes-1;
      break;
    }
    
    $('#likes-'+id).val(likes);
    if(likes>0) {
      $('#people_liked'+id).html(kFormatter(likes));
      $('#user_liked'+id).attr("style", "display:block;");
    } else {
      $('#user_liked'+id).attr("style", "display:none;");
    }
    }
    });
  }

這是like.php中的PHP代碼：

<?php
session_start();
require $_SERVER['DOCUMENT_ROOT'] . '/require/serverconnect.php';

$username = $_SESSION['username'];
$post_id = $_POST['post_id'];
$action = $_POST['action'];

if(!empty($post_id)) {
switch ($action) {
    case 'like':
        $query = "INSERT IGNORE INTO tintuc_post_likes (username_of_like, liked_post_id) VALUES ('$username','$post_id')";
        $result = mysqli_query($con, $query);
    break;
    
    case 'unlike':
        $query = "DELETE FROM tintuc_post_likes WHERE username_of_like = '$username' AND liked_post_id = '$post_id'";
        $result = mysqli_query($con, $query);
    break;
}
}
?>

PHP Select 代碼在 index.php 中：

<?php
$sql = "SELECT tintuc_posts.id, tintuc_posts.author, tintuc_posts.content, tintuc_posts.timeofpost, tintuc_posts.has_comment, tintuc_posts.avatar, tintuc_posts.has_image, tintuc_posts.image, tintuc_posts.username, tintuc_posts.c4id, COUNT(tintuc_post_likes.like_id) as likes, GROUP_CONCAT(accounts.name separator '|') as liked_by
    FROM tintuc_posts
    LEFT JOIN tintuc_post_likes
    ON tintuc_posts.id = tintuc_post_likes.liked_post_id
    LEFT JOIN accounts
    ON tintuc_post_likes.username_of_like = accounts.username
    GROUP BY tintuc_posts.id
    ORDER BY tintuc_posts.id DESC";
 $result = mysqli_query($conn, $sql);
 if (mysqli_num_rows($result) > 0) {
 while($row = mysqli_fetch_assoc($result)) {
 ?>

這是表格：

Answer 1

因為這可能是你的答案：

在您的屏幕截圖中，工具欄中有黃色拇指，這是您希望在頁面刷新時選擇/突出顯示的內容嗎？ 為了表明他們已經喜歡它？

假設是這種情況，當你運行代碼來繪制那個按鈕時，你需要得到一個喜歡它的用戶列表，並與當前用戶進行比較，然后如果當前用戶在那個列表中，添加“選擇" class （或您最初單擊時執行的任何操作），因此按鈕看起來已選中。

我不是 PHP 開發人員，但在偽代碼中會是這樣的：

var hasLiked = ListOfUserLinks.IndexOf(currentuserId) >= 0;
<button name="like" class="button <%hasLiked ? 'likedState' : ''%>" />

您可以看到您只是根據用戶是否喜歡它來調整類，但它是在頁面加載時完成的，因為這是頁面的初始 state。