Question

我在index.php页面上有一个类似的按钮，增加并更改为＆＃34;喜欢＆＃34;点击时。哪个好。问题是，当我重新加载页面时，＆＃34;喜欢＆＃34;按钮回到原来的＃34;喜欢＆＃34;州。

我的问题是，如何将按钮保持为＆＃34;喜欢＆＃34;即使在页面刷新？

我假设在likes表中，我必须将liked_unliked设置为＆＃39; 1＆＃39;单击按钮时。但是，改变类似按钮状态的JQuery如何知道有一个＆＃39; 1＆＃39;意思是用户已经点击了“喜欢”这样的内容。在那个图像上，这将保持＆＃34;喜欢＆＃34;即使在页面刷新状态？

这是我的index.php：

<!doctype html>
<?php
session_start();
?>
<html>
<head>

<?php
    include('header.php');
?>

<script>
//send info to like_button.php then to DB
$(document).ready(function(){
 $(".button").click(function(){
  $.ajax({url:"liked_button.php",success:function(result){
  //do nothing
  }});
 });
});
//change like button when clicked
$(document).ready(function(){
  $(".button").click(function(){
    var t=$(this);
         t.replaceWith("<button type='button' class='button_pressed'>Liked</button>");
     });
});
//increment like counter when button is clicked
function increase(t) { 
 t=$(t).parent().next(); 
     t.val(parseInt(t.val())+1); 
}
</script>

</head>
<link type="text/css" rel="stylesheet" href="index.css">
<body>

<?php
//dispay the images that the users upload
$conn = mysqli_connect("localhost","root","") or die ("No SQLI");
    mysqli_select_db($conn, "sample") or die ("No DB");

$sqli = "SELECT * FROM `photos` ORDER BY `id` DESC";

$result = mysqli_query($conn, $sqli) or die ("No query");

while($row = mysqli_fetch_assoc($result))    

{
$username = $row['username'];
$title = $row['title'];
$description = $row['description'];
$image_name = $row['image_name'];
$image_id = $row['image_id'];
$random_directory = $row['random_direc'];
$date = date('Y-m-d');

 $image_info = "http://localhost/splindr_2.0/photos/$random_directory/$image_name";
 //echo all content in content wrapper
 echo "<div id=contentWrapper'>
          <div class='photo'>
              <div class='actual_image'>
                 <img src='$image_info'>
              </div>          
              <div class='like_system'><button onClick='increase(this)' type='button' class='button' id='button' name='button'>Like</button></div> 
                                       <input type='text' name='total_likes' id='total_likes' value='0'>
                                       <div class='twitter'><button type='button'  class='twitter_button' name='twitter_button' id='twitter_button'>
                                                            <a style='color: #2e4987;text-decoration:none' href='http://www.twitter.com/share?url=$image_info&hashtags=Splindr, CheckThisOut'>Share On Twitter</a></button>
                                       </div>
                                       <div class='trash_bin'>
                                          <button type='button' class='delete_button' name='delete_button' id='delete_button'>
                                             <a style='text-decoration:none;color: #2e4987' href='delete_post.php'>Delete</a>
                                          </button>
                                       </div>
                    <div class='info_wrapper'>
                       <div class='info_header'>Title: $title &nbsp By: $username &nbsp   Date: $date</div>
                           <div class='description'>$description</div>
                    </div>
              </div>
          </div>
      </div>";//end contentWrapper

}

?> 

</body>
</html>

我的likes表：

CREATE TABLE if not exists `likes` (
     `id` int(20) NOT NULL AUTO_INCREMENT,
     `image_id` varchar(300) NOT NULL,
     `liked_by` varchar(50) NOT NULL,
     `liked_unliked` enum('0','1') NOT NULL DEFAULT '0',
      PRIMARY KEY (`id`),
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

Answer 1

您正在跟踪我在likes_by字段中按下我所假设的按钮的人。您可以将用户喜欢的内容添加到会话中。这样，如果你刷新页面，你就会在喜欢的会话中拥有user_id，并相应地调整你的css。

    <?php
   $_SESSION['likes'] = array(
      'img1' => 'user2, user3',
      'img2' => 'user2',
      'img3' => 'user2','user5',
     );

    $likes = $_SESSION['likes'] ;

    foreach($likes as $key => $like){
       $likeArray = explode(',', $like); //convert string of user ids to array

      if(in_array($userId, $likeArray)){
        //user has like image with id $key
      }else{
       //user has not
      }

     }
     ?>

在页面刷新时保持按钮状态？

1 个答案: