如何僅顯示3條評論，然后每個按鈕單擊再顯示10條評論

Question

我正在創建用於（例如）帖子的標准評論系統，但是我很難按自己的方式顯示它們。 我可以輕松地一次顯示所有評論，但是我想首先顯示3條評論，然后單擊一個按鈕，在每次單擊后將為每個評論添加10條評論。

首先，我嘗試在click事件上創建AJAX，該事件會將新的php頁面加載到顯示評論的div中。 問題是，div可以按類或ID引用，如果按類引用，則新注釋將替換3個已經顯示的注釋（有效地進行3x10的顯示），並且div為ID引用，則新注釋將替換3個已顯示注釋中的第一個。

<?php
$followingposts = DB::query('SELECT posts.id, posts.body, posts.likes, posts.comments, posts.posted_at, users.`username`, fullname FROM users, posts, followers WHERE posts.user_id = followers.user_id AND users.id = posts.user_id AND follower_id = :userid ORDER BY posts.likes DESC;', array(':userid'=>$userid));
foreach ($followingposts as $post) {
?>
    <div…

我要在帖子中顯示前3條評論，效果很好：

<?php
$commentsposts = DB::query('SELECT comments.id, comments.comment, comments.post_id, comments.likes, comments.comments, comments.posted_at, users.username, fullname
FROM comments, users
WHERE post_id = :postid
AND comments.user_id = users.id
ORDER BY comments.posted_at
DESC LIMIT 3;', array(':postid'=>$post['id']));

然后是另一個foreach循環以獲取注釋：

foreach ($commentsposts as $comments) {
?>
<div class="posts_comments" id="posts_comments_id">
...

然后是AJAX函數（通過按鈕調用）：

function show_more_comments_click(elem) {
var post_id = $(elem).attr('value');
 var commentCount = 3; 
commentCount = commentCount + 10; 
$('#posts_comments_id').load('./inc/load_comments.php', {
commentNewCount: commentCount
});
};

加載此：

<?php
$commentNewCount = $_POST['commentNewCount'];

$commentsposts = DB::query("SELECT comments.id, comments.comment, comments.post_id, comments.likes, comments.comments, comments.posted_at, users.username, fullname FROM comments, users WHERE post_id = :postid AND comments.user_id = users.id ORDER BY comments.posted_at DESC LIMIT 0,$commentNewCount;", array(':postid'=>$post_id));

foreach ($commentsposts as $comments) {
?>
...

但是我不能在已經顯示的3條評論下獲取新評論。 任何建議如何實現這一目標？ 提前致謝。

Answer 1

您是否嘗試在id為的div容器中顯示前3條評論，例如：

 <div id="commentContainer"> <div id="comment1" data-comment-id="1" class="comments"> -- comment html -- </div> <div id="comment2" data-comment-id="2" class="comments"> -- comment html -- </div> <div id="comment3" data-comment-id="3" class="comments"> -- comment html -- </div> </div> 

然后單擊按鈕將發送帶有最近評論ID的Ajax請求，例如：comment3。 這將幫助腳本收集下10個注釋，例如：comment4，comment5等，並將這些新注釋html附加到您已經具有容器ID的div中（例如：commentContainer）。

 <div id="commentContainer"> <div id="comment1" data-comment-id="1" class="comments"> -- comment html -- </div> <div id="comment2" data-comment-id="2" class="comments"> -- comment html -- </div> <div id="comment3" data-comment-id="3" class="comments"> -- comment html -- </div> <div id="comment4" data-comment-id="4" class="comments"> -- comment html -- </div> <div id="comment5" data-comment-id="5" class="comments"> -- comment html -- </div> <div id="comment6" data-comment-id="6" class="comments"> -- comment html -- </div> <div id="comment7" data-comment-id="7" class="comments"> -- comment html -- </div> <div id="comment8" data-comment-id="8" class="comments"> -- comment html -- </div> <div id="comment9" data-comment-id="9" class="comments"> -- comment html -- </div> <div id="comment10" data-comment-id="10" class="comments"> -- comment html -- </div> <div id="comment11" data-comment-id="11" class="comments"> -- comment html -- </div> <div id="comment12" data-comment-id="12" class="comments"> -- comment html -- </div> <div id="comment13" data-comment-id="13" class="comments"> -- comment html -- </div> </div> 

休息一下，您已經在使用服務器文件和mysql查詢收集注釋。

謝謝