【问题标题】:How to display only 3 comments and then 10 more comments on each button click如何仅显示 3 条评论,然后在每个按钮单击时再显示 10 条评论
【发布时间】:2019-07-01 16:53:49
【问题描述】:

我正在为(例如)帖子创建标准评论系统,但我很难按照我想要的方式显示它们。我可以轻松地一次显示所有 cmets,但我想首先显示 3 个 cmets,然后是一个按钮,每次点击后都会添加 10 个 cmets。

起初,我尝试制作一个 AJAX on click 事件,它将一个新的 php 页面加载到显示 cmets 的 div 中。问题是,div 可以按类或 ID 引用,如果它们是按类引用,那么新的 cmets 将替换 3 个已经显示的 cmets(有效地进行 3x10 显示),如果 div 是由 ID 引用,那么新的 cmets 将替换 3 个已显示的 cmets 中的第一个。

<?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 个 cmets,效果很好:

<?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']));

然后是 cmets 的另一个 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 个 cmets 的新 cmets。 关于如何实现这一目标的任何建议? 提前致谢。

【问题讨论】:

  • 请搜索php分页或ajax分页
  • 这是带有一些包装器的 PDO,但您仍然使用错误,因为您将 PHP 变量注入 SQL 字符串。

标签: php jquery ajax mysqli facebook-comments


【解决方案1】:

您是否尝试过在具有 id 的 div 容器中显示前 3 个 cmets,例如:

<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 个 cmets,例如:comment4、comment5 等等,并将这些新 cmets 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 查询收集了 cmets。

谢谢

【讨论】:

    猜你喜欢
    • 2016-08-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-17
    • 2013-06-24
    • 2013-06-05
    • 2019-01-13
    相关资源
    最近更新 更多