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>

Rest您已经使用服务器文件和mysql查询收集了注释。

谢谢

如何在每个按钮单击时仅显示3条评论，然后显示10条评论

1 个答案: