如何解决如何通过jquery在foreach循环中只显示被点击的元素
我有很多评论。他们每个人都有一个按钮来添加子评论。当我尝试做这样的事情时：
$(document).ready(function(){
$('.addsubcomment').click(function(e){
e.preventDefault();
$('.hideform').addClass('customflex').removeClass('hideform');
$('.addsubcomment').hide();
});
});
每个项目的评论表单都会打开，但我只需要当前的。这怎么做？（我不使用 show 因为表单有 display: flex;）。
<ul class="comments">
@foreach($specpost as $comments)
@foreach($comments->comments->sortByDesc('id') as $comment)
<li class="clearfix">
@if($comment->parent_id === 0)
<img src="https://bootdey.com/img/Content/user_1.jpg" class="avatar">
<div class="post-comments">
<p class="Meta customflex justify-content-between"><a href="#">{{ $comments->user->name }}</a><span>{{ $comments->user->created_at }}</span></p>
<p>
{{ $comment->content }}
</p>
@if(Auth::check())
@if(Auth::user()->id === $comment->user_id)
<div class="customflex justify-content-end">
<a class="addsubcomment text-primary" href="#">Add comment</a>//!!!!!!Here user clicks add comment button!!!!!!!!!
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="{{ route('comment.destroy',['comment' => $comment->id]) }}" method="POST">
@method('DELETE')
@csrf
<a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
@endif
@endif
</div>
@endif
@foreach($comment->replies as $subcomment)
<ul class="comments">
<li class="clearfix">
<img src="https://bootdey.com/img/Content/user_3.jpg" class="avatar">
<div class="post-comments">
<p class="Meta customflex justify-content-between"><a href="#">{{ $comments->user->name }}</a><span>{{ $comments->user->created_at }}</span></p>
<p>
{{ $subcomment->content }}
</p>
@if(Auth::check())
@if(Auth::user()->id === $comment->user_id)
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="{{ route('comment.destroy',['comment' => $comment->id]) }}" method="POST">
@method('DELETE')
@csrf
<a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
@endif
@endif
</div>
</li>
</ul>
</li>
@endforeach
<form method="POST" class="w-100" action="{{ route('comment.store') }}">
@csrf
<div class="hideform replyform mb-3">// !!!!!!!This is a form where users can write their comments!!!!!
<input type="hidden" name="post_id" value="{{ $comment->post->id }}">
<input type="hidden" name="parent_id" value="{{ $comment->id }}">
<input class="d-block ml-auto w-50" type="text" name="content" required>
<button type="submit" class="offset replysub fas fa-paper-plane ml-1"></button>
</div>
</form>
@endforeach
@endforeach
</ul>
JSfiddle：https://jsfiddle.net/qwe123wq/9mfdg14r/18/ 如果您需要澄清其他事情，请告诉我。 谢谢！
解决方法
您可以使用 closest("li").nextAll('form:first').find('.hideform') 获取表单 div，然后在那里添加类。
演示代码：
$(document).ready(function() {
$('.addsubcomment').click(function(e) {
e.preventDefault();
//get closest li > next all find first form
$(this).closest("li").nextAll('form:first').find('.hideform').addClass('customflex').removeClass('hideform');
//$(this).hide();//if you need to hide button which is clicked
});
});.customflex {
display: block
}
.hideform {
display: none
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Start Comments -->
<div class="bootstrap snippets bootdey">
<div class="row">
<div class="col-md-12">
<div class="blog-comment">
<hr>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
ewrwe
</p>
<div class="customflex justify-content-end">
<a class="addsubcomment text-primary" href="#">Add comment</a>
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
ewrew
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
</li>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
dsf
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
dsfsd
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
werwe
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/63" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<form method="POST" class="w-100" action="http://127.0.0.1:8000/user/comment">
<input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd">
<div class="hideform replyform mb-3">
<input type="hidden" name="post_id" value="9">
<input type="hidden" name="parent_id" value="63">
<textarea class="d-block ml-auto w-50" type="text" name="content" rows="3" required=""></textarea>
<button type="submit" class="offset replysub fas fa-paper-plane ml-1"></button>
</div>
</form>
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
sdfsdf
</p>
<div class="customflex justify-content-end">
<a class="addsubcomment text-primary" href="#">Add comment</a>
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
sdfsdf
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
</li>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
dsf
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
ewre
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
sdfsd
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
чего так
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
JohnDoe,эй
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<ul class="comments">
<li class="clearfix">
<img src="" class="avatar">
<div class="post-comments">
<p class="meta customflex justify-content-between"><a href="#">Name1</a><span>2021-01-19 12:40:46</span></p>
<p>
sssssssssssssssssssssssss
</p>
<div class="customflex justify-content-end">
<a class="editsubcomment text-warning ml-5" href="#">Edit comment</a>
<form class="deletecommform ml-5" action="http://127.0.0.1:8000/user/comment/59" method="POST">
<input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd"> <a class="deletecommbtn text-danger" href="#">Delete comment</a>
</form>
</div>
</div>
</li>
</ul>
<form method="POST" class="w-100" action="http://127.0.0.1:8000/user/comment">
<input type="hidden" name="_token" value="3JRWWJ6PJJN8ol9tZt0i9HrwpomBCq0DD6UAEaOd">
<div class="hideform replyform mb-3">
<input type="hidden" name="post_id" value="9">
<input type="hidden" name="parent_id" value="59">
<textarea class="d-block ml-auto w-50" type="text" name="content" rows="3" required=""></textarea>
<button type="submit" class="offset replysub fas fa-paper-plane ml-1"></button>
</div>
</form>
</ul>
</div>
</div>
</div>
</div>
<!--End Comments -->版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
