Блог

Я работаю над кнопкой «Нравится». Он работает просто отлично, если пользователь не обновит страницу. Когда страница не обновляется, кнопка «Нравится» сама меняет стиль и добавляет 1 к числу «нравится», если пользователь нажмет на нее. Но когда страница обновляется, кнопка «Нравится» сохраняет количество «нравится» и предыдущий стиль, затем добавьте 1 к количеству «нравится» и измените на новый стиль, если пользователь нажмет на него. В этом-то и проблема.

Кнопка «Нравится» выглядит следующим образом:

Вот код Javascript:

 function addLikes(id,action) {
    $.ajax({
    url: "like.php",
    data:'post_id=' id 'amp;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;");
    }
    }
    });
  }
 

Вот PHP — код в like.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 Выберите код в 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)) {
 ?>
 

Вот таблицы:

Поскольку это, вероятно, ваш ответ:

На вашем снимке экрана у вас есть желтый большой палец на панели инструментов, это то, что вы хотите выбрать/выделить при обновлении страницы? Чтобы показать, что им это уже понравилось?

Предполагая, что это так, когда вы запускаете код для рисования этой кнопки, вам нужно получить список пользователей, которым она нравится, и сравнить с текущим пользователем, а затем, если текущий пользователь находится в этом списке, добавьте класс «выбранный» (или что бы вы ни делали при первоначальном нажатии), чтобы кнопка выглядела выбранной.

Я не разработчик PHP, но в псевдокоде было бы что-то вроде:

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

Вы можете видеть, что вы просто настраиваете классы в зависимости от того, понравилось ли это пользователю, но это делается во время загрузки страницы, так как это начальное состояние страницы.