JavaScript最近类

Question

我想在我的评论部分显示回复表单，基于已被点击的评论回复按钮，但目前它显示的是所有评论的表单，而不是特定的注释。问题是

我如何得到最近的形式，以便只显示一个形式在当时？

代码

// this button exist in all comments with same class
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>

//reply form DIV
<div class="blog-form mt-6 replyComment" style="display:none">// form here</div>

// New comment form DIV
<div class="blog-form mt-6 originalComment"> //form here </div>


$('.reply').click(function (e) {
  e.preventDefault();
  $('.replyComment').show();
  $('.originalComment').hide();
});

更新

完整注释代码

<div class="blog-comments mt-4">
    @include('errors.errors')

    @if(isset($post))
        @forelse($post->comments as $comment)
            <div class="comments-1 w-100">
                <div class="comments-photo">
                    @if(!empty($comment->user->avatar))
                    <img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $comment->user->avatar }}" alt="{{$comment->user->name}}">
                    @else
                    <img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$comment->user->name}}">
                    @endif
                </div>
                <div class="comments-info">
                    <h6> {{$comment->user->name}} <span>{{$comment->created_at->format('M d, Y')}}</span></h6>
                    <div class="port-post-social float-right">
                        <button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
                    </div>
                    <p class="mt-1">{!! $comment->comment !!}</p>
                </div>
            </div>

            <div class="blog-form mt-6 replyComment" style="display:none">
                <h4 class="mb-3">Post a Reply</h4>

                <form method="post" action="{{ route('reply.add') }}">
                    @csrf
                <div class="gray-form row">
                    <div class="col-md-12">
                        <input type="hidden" name="comment_id" value="{{ $comment->id }}" />
                        @if(isset($post))
                        <input type="hidden" name="post_id" value="{{ $post->id }}" />
                        @elseif(isset($product))
                        <input type="hidden" name="product_id" value="{{ $product->id }}" />
                        @endif
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button class="button red" type="submit">SUBMIT</button>
                    </div>
                    <div>
                    </div>
                </div>
                </form>
            </div>

            @forelse($comment->replies as $reply)
            <div class="comments-1 comments-2 w-100">
                <div class="comments-photo">
                    @if(!empty($reply->user->avatar))
                    <img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $reply->user->avatar }}" alt="{{$reply->user->name}}">
                    @else
                    <img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$reply->user->name}}">
                    @endif
                </div>
                <div class="comments-info p-3 bg-light">
                    <h6> {{$reply->user->name}} <span>{{$reply->created_at->format('M d, Y')}}</span></h6>
                    <div class="port-post-social float-right">
                        <button type="button" class="btn btn-sm btn-secondary text-light reply">Reply</button>
                    </div>
                    <p class="mt-1">{!! $reply->comment !!}</p>
                </div>
            </div>

            <div class="blog-form mt-6 replyComment" style="display:none">
                <h4 class="mb-3">Post a Reply</h4>

                <form method="post" action="{{ route('reply.add') }}">
                    @csrf
                <div class="gray-form row">
                    <div class="col-md-12">
                        <input type="hidden" name="comment_id" value="{{ $reply->id }}" />
                        @if(isset($post))
                        <input type="hidden" name="post_id" value="{{ $post->id }}" />
                        @elseif(isset($product))
                        <input type="hidden" name="product_id" value="{{ $product->id }}" />
                        @endif
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button class="button red" type="submit">SUBMIT</button>
                    </div>
                    <div>
                    </div>
                </div>
                </form>
            </div>


                @forelse($reply->replies as $reply2)
                <div class="comments-1 comments-2 ml-5 w-100">
                    <div class="comments-photo">
                        @if(!empty($reply->user->avatar))
                        <img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $reply2->user->avatar }}" alt="{{$reply2->user->name}}">
                        @else
                        <img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$reply2->user->name}}">
                        @endif
                    </div>
                    <div class="comments-info bg-light p-3">
                        <h6> {{$reply2->user->name}} <span>{{$reply2->created_at->format('M d, Y')}}</span></h6>
                        <p class="mt-1">{!! $reply2->comment !!}</p>
                    </div>
                </div>
                @empty
                @endforelse
            @empty
            @endforelse
        @empty
        <h3>Be the first to leave a comment.</h3>
        @endforelse
    @else
    {{-- reserved for products reviews --}}
    @endif
</div>
<div class="blog-form mt-6 originalComment">
    <h4 class="mb-3">Post a Comment</h4>

    <form method="post" action="{{ route('comments.store') }}">
        @csrf
    <div class="gray-form row">
        <div class="col-md-12">
            @if(isset($post))
            <input type="hidden" name="post_id" value="{{ $post->id }}" />
            @elseif(isset($product))
            <input type="hidden" name="product_id" value="{{ $product->id }}" />
            @endif
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
            </div>
        </div>
        <div class="col-md-12">
            <button class="button red" type="submit">SUBMIT</button>
        </div>
        <div>
        </div>
    </div>
    </form>
</div>

尽量减少上述表格，以更好地理解

结构

<comments>
  -reply button
  <reply form></reply form>

  <comment reply>
       -reply button
       <reply form></reply form>


       <comment reply replies>
       <comment reply replies>
   </comment reply>

</comments>

<comment form>
</comment form>

Answer 1

您想要显示的<div>似乎是按钮的comments-1祖先后面的元素。

考虑到这一点，我将使用.closest('.comments-1')来选择祖先，使用.next('.replyComment')来选择下面的元素。

$('.reply').click(function (e) {
  e.preventDefault();
  $(".replyComment, .originalComment").hide();
  $(this).closest('.comments-1').next('.replyComment').show();
});

Answer 2

取决于按钮上方是否有表单(然后它将无法工作)：

​

function opens(arg) {
var closest = document.getElementsByClassName("blog-form");
closest[arg].style.display = "block";
for(var i = 1; i < closest.length; i++) {
    if(i != arg) {
    closest[i].style.display = "none";
    }      
}
}

<button onclick = "opens(0)">Reply</button>
<form class = "blog-form" style = "display: none">
<input>
</form>
<form class = "blog-form" style = "display: none">

<input>
</form>
<button onclick = "opens(1)">Another Reply</button>

​

为了使其工作，我正在操作CSS display属性。