我想基于已单击的评论回复按钮在我的评论部分中显示回复表单,但是当前它显示所有评论的表单,而不是特定评论。 问题是
如何获得最接近的表格以仅显示一次表格?
// 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>
似乎您想显示的<div>
是按钮的comments-1
祖先后面的元素。
鉴于此,我将使用.closest('.comments-1')
选择祖先,并使用.next('.replyComment')
选择后面的元素。
$('.reply').click(function (e) {
e.preventDefault();
$(".replyComment, .originalComment").hide();
$(this).closest('.comments-1').next('.replyComment').show();
});
取决于按钮上方是否有表单(然后它将不起作用):
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
属性。
取决于按钮上方是否有表单(然后它将不起作用):
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
属性。