bootstrap-4 - 在 laravel 中使用模态回复博客评论

Question

我已经设置了评论和回复，显然为什么我要在第一条评论上发表评论。所以所有回复都转到第一条评论。我在模式上有输入隐藏字段。

问题出在模式中，当我单击按钮并打开模式时，$comment->id 从 11 变为 13。这是实际的https://imgur.com/s9iRVnb

刀片.php

@foreach($comments as $comment)
            <div class="comment-wrap">
               <div class="photo">
                  <div class="avatar" style="background-image: url('/images/frontend_images/uploads/{{$comment->user->avatar}}')"></div>
               </div>
               <div class="comment-block">
                  <p class="comment-text">{{$comment->body}}
                  </p>
                  <div class="bottom-comment">
                     <div class="comment-date"><a href="{{route('profile_posts_path',$comment->user_id)}}">{{$comment->user->username}}</a> on {{$comment->created_at->format('l jS \\of F Y h:i:s A')}}</div>
                     <ul class="comment-actions">
                        <li class="complain">{{$comment->created_at->diffForHumans()}}</li>
                        <li class="reply"><button type="button" class="btn btn-outline-primary btn-mini" data-toggle="modal" data-target="#reply" >Reply {{$comment->id}} 
                           </button>
                        </li>
 <!-- Modal -->
                        <div class="modal fade" id="reply" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                           <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                 <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Reply to a Comment</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                 </div>
                                 <div class="modal-body">
                                    <form method="post" action="{{ route('reply.add') }}">
                                       @csrf
                                       <div class="form-group">
                                          <textarea name="comment_body" id="comment_body" cols="60" rows="3" placeholder="Type your comment here...."></textarea>
                                          <input type="hidden" name="blog_id" value="{{ $blog->id }}" />
                                          <input type="text" name="comment_id" value="{{$comment->id}}" />
                                       </div>
                                 </div>
                                 <div class="modal-footer">
                                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                 <button type="submit" class="btn btn-primary">Submit</button>
                                 </form>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </ul>
                  </div>
               </div>
               <!-- Button trigger modal -->
            </div>
            @if($comment->replies)
            @foreach($comment->replies as $rep)
            <div class="comment-wrap" style="margin-left:50px;width:710px;">
               <div class="photo">
                  <div class="avatar" style="background-image: url('/images/frontend_images/uploads/{{$rep->user->avatar}}')"></div>
               </div>
               <div class="comment-block">
                  <p class="comment-text">{{$rep->body}}
                  </p>
                  <div class="bottom-comment">
                     <div class="comment-date"><a href="{{route('profile_posts_path',$rep->user_id)}}">{{$rep->user->username}}</a> on {{$rep->created_at->format('l jS \\of F Y h:i:s A')}}</div>
                     <ul class="comment-actions">
                        <li class="complain">{{$rep->created_at->diffForHumans()}}</li>
                     </ul>
                  </div>
               </div>
            </div>
            @endforeach
            @endif
            @endforeach

I want the reply on the particular comment..

标签： bootstrap-4laravel-5.7

Answer 1

您为我认为不需要的每条评论制作了一个模式。一个就足够了，但是即使您想保留它们，它们也应该具有唯一的 id，如果给它们“相同的 id dom 将获得第一个具有 id 的元素”，我认为最好将评论 id 传递给模态并只制作一个。

   @foreach($comments as $comment)
      <div class="comment-wrap">
         <div class="photo">
            <div class="avatar" style="background-image: url('/images/frontend_images/uploads/{{$comment->user->avatar}}')"></div>
         </div>
         <div class="comment-block">
            <p class="comment-text">{{$comment->body}}</p>
            <div class="bottom-comment">
               <div class="comment-date">
                  <a href="{{route('profile_posts_path',$comment->user_id)}}">
                     {{$comment->user->username}}
                  </a> on {{$comment->created_at->format('l jS \\of F Y h:i:s A')}}
               </div>
               <ul class="comment-actions">
                  <li class="complain">{{$comment->created_at->diffForHumans()}}</li>
                  <li class="reply">
                     <!-- Button trigger modal -->
                     <button type="button" class="reply-modal btn btn-outline-primary btn-mini" data-toggle="modal" data-target="#reply" >Reply {{$comment->id}} 
                     </button>
                  </li>
               </ul>
            </div>
         </div>
      </div>
      @if($comment->replies)
         @foreach($comment->replies as $rep)
            <div class="comment-wrap" style="margin-left:50px;width:710px;">
               <div class="photo">
                  <div class="avatar" style="background-image: url('/images/frontend_images/uploads/{{$rep->user->avatar}}')"></div>
               </div>
               <div class="comment-block">
                  <p class="comment-text">{{$rep->body}}</p>
                  <div class="bottom-comment">
                     <div class="comment-date">
                        <a href="{{route('profile_posts_path',$rep->user_id)}}">{{$rep->user->username}}</a> on {{$rep->created_at->format('l jS \\of F Y h:i:s A')}}
                     </div>
                     <ul class="comment-actions">
                        <li class="complain">{{$rep->created_at->diffForHumans()}}</li>
                     </ul>
                  </div>
               </div>
            </div>
         @endforeach
      @endif
   @endforeach

   <!-- Modal -->
   <div class="modal fade" id="reply" tabindex="-1" role="dialog" aria-labelledby="replyModal" aria-hidden="true">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
         <form method="post" action="{{ route('reply.add') }}">
            <div class="modal-header">
               <h5 class="modal-title" id="replyModal">Reply to a Comment</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
                  @csrf
                  <div class="form-group">
                     <textarea name="comment_body" id="comment_body" cols="60" rows="3" placeholder="Type your comment here...."></textarea>
                     <input type="hidden" name="blog_id" value="{{ $blog->id }}" />
                     <input id="comment_id" type="text" name="comment_id" value="" />
                  </div>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
               <button type="submit" class="btn btn-primary">Submit</button>
            </div>
         </form>
         </div>
      </div>
   </div>

然后您可以通过一个简单的 jquery 脚本传递评论 ID：

$(document).on("click", ".reply-modal", function () {
     var commentId = $(this).data('id');
     $(".modal #reply #comment_id").val( commentId );
     // it is unnecessary to have to manually call the modal.
     // $('#reply').modal('show');
});