我正在try 打开与帖子相关的特定 comments ,但当我单击view more comments时,所有 comments 都会打开,但我想打开与帖子相关的 comments ,不是所有的,请帮助我如何解决?谢谢你

html view

<div class="comment-box">
  @foreach ($communityPosts->communityPostReply as $communityPostReplies)
  <div class="user-comment-box">
      <div class="d-flex pt-3">
         
          <div class="notification-text ms-3 w-100">
          <span class="username fw-bold">{{$communityPostReplies->users->full_name}}</span>
         
          <p class="mt-2 mb-0">{{$communityPostReplies->reply_body}}</p>
          <span class="text-muted small">{{$communityPostReplies->created_at->diffForHumans()}}</span>
          </div>
      </div>
  </div>
  @endforeach
  <a style="cursor: pointer;" class="see-more">View More Comments</a>

Here is my 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
          }
      });
    });

推荐答案

您应该将 Select 器限制为当前的.comment-box div.

$(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();
    let current_post = $(this).closest(".comment-box");
    var done = $('<div class="see-more=done"></div>');
    current_post.find(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them
    if (current_post.find(".user-comment-box:hidden").length == 0) { // check if any hidden divs
      $(this).replaceWith(done);
    }
  });
});

Jquery相关问答推荐

在不同的行插入不同的值

我需要在上一个表格单元格中显示计算结果

如果选中了三个sibling ,则选中一个复选框

将元素附加到每个函数 jQuery

如果您的 Select 器对象无效,为什么 jQuery 不会炸弹?

在 textarea 输入中美化 json 数据

jquery数据表隐藏列

jquery如何捕获输入键并将事件更改为选项卡

如何在数据表中显示空数据消息

在 jQuery UI Datepicker 中禁用future 日期

如何使用 jQuery 将表格的一行滚动到视图 (element.scrollintoView) 中?

Jquery,清除/清空 tbody 元素的所有内容?

C# String.IsNullOrEmpty Javascript 等效项

如何使 jQuery Contains 不区分大小写,包括 jQuery 1.8+?

jquery 检测某些类的 div 已添加到 DOM

如何使用 JQuery 获取 GET 和 POST 变量?

JavaScript 中的简单节流阀

调整浏览器大小时如何自动居中 jQuery UI 对话框?

如何获得两个日期对象之间的小时差?

Jquery Select 所有具有 $jquery.data() 的元素