如何仅显示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查询收集注释。

谢谢