jQuery"；请参阅更多……”；当每页有多篇文章时，加载更多文章评论的按钮不起作用

我正在尝试为我的帖子评论创建一个“查看更多…”功能。我想抓取最后5条评论，如果有超过5条评论，我想显示一个“查看更多…”按钮。当用户单击按钮时，它将显示下一个5，依此类推

当我只有一篇在页面上有评论的帖子时，我就能够让它发挥作用。然而，当我在页面上加载更多帖子（每个帖子都有自己的评论集）时，我的系统就崩溃了

这是我的密码：

我使用的是Laravel，以下是我的观点：

<div class="comment-box-container">
 <div class="comment-box">
    <button class="see-more">See More...</button>
    @foreach ($type->comments as $comment)
        <div class="user-comment-box">
           // bunch of code to layout the users comment here
        </div>
    @endforeach
 </div><!--comment-box end-->
</div><!-- comment-box-container end-->

查看更多。。。
@foreach（$type->comments as$comment）
//在这里布局用户评论的一堆代码
@endforeach

这是我的Jquery

$(function(){
        $(".user-comment-box").slice(-5).show(); // select the first 5 hidden divs
        $(".see-more").click(function(e){ // click event for load more
            e.preventDefault();
            var done = $('<div class="see-more=done"></div>');
            $(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them
            if($(".user-comment-box:hidden").length == 0){ // check if any hidden divs
                $(".see-more").replaceWith(done); // if there are none left
            }
        });
});

$（函数（）{
$（“.user comment box”）.slice（-5）.show（）；//选择前5个隐藏的div
$（“.see more”）。单击（函数（e）{//单击事件以加载更多
e、 预防默认值（）；
var done=$（''）；
$（“.user comment box:hidden”）.slice（-5.show（）；//选择下5个隐藏的div并显示它们
if（$（“.user comment box:hidden”）.length==0{//检查是否有任何隐藏的div
$（“.see more”）.replaceWith（done）；//如果没有剩余
}
});
});

在我的css im隐藏

.user注释框{display:none；}

---

就像我之前所说的，当页面上只有一篇带有评论的帖子时，这种方法是有效的，但当页面上有多篇评论时就不行了。我对JavaScript和Jquery非常陌生，不知道如何解决这个问题。有人知道我做错了什么吗？

如果我理解正确，你需要这样的东西：

$(function(){
       // select the first 5 hidden divs

    $( ".comment-box" ).each(function( index ) {
 $(this).children(".user-comment-box").slice(-5).show();
});

        $(".see-more").click(function(e){ // click event for load more
            e.preventDefault();
            var done = $('<div class="see-more=done">done</div>');
            $(this).siblings(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them
            if($(this).siblings(".user-comment-box:hidden").length == 0){ // check if any hidden divs
                $(this).replaceWith(done); // if there are none left
            }
        });
});

$（函数（）{
//选择前5个隐藏的div
$（“.comment box”）。每个（函数（索引）{
$（this.children（“.user comment box”）.slice（-5.show（）；
});
$（“.see more”）。单击（函数（e）{//单击事件以加载更多
e、 预防默认值（）；
var done=$（'done'）；
$（this）.sides（“.user comment box:hidden”）.slice（-5）.show（）；//选择下5个隐藏div并显示它们
if（$（this）.sides（“.user comment box:hidden”）.length==0{//检查是否有任何隐藏的div
$（this）.replaceWith（done）；//如果没有剩余
}
});
});

---

演示：我已经稍微更改了您的初始代码-因此，现在注释隐藏在每个块中，按钮应该只显示相关的注释（来自同一块的注释）。

$（“.comment box”）。ready

应该是

$（文档）。ready

，您的

.comment box

将在DOM完成后立即准备就绪。实际上，您已经使用了ready速记

$（function（）{

），所以根本不需要准备。您可以制作一个堆栈片段或JSFIDLE来演示问题吗？是的，这很好，但是您是否为每个帖子/评论块分离了“显示更多”按钮？然后您必须稍微更改选择器……帖子是动态的。因此，所有的帖子都是动态的“查看更多…”按钮是相同的。这是我的问题think@xslibx，不确定是否有完整的HTML，但我想这可能会有所帮助？现在，每个按钮都与它自己的注释相关，而不是与页面上的所有注释相关…（更精确的选择器，这是您需要的）