我正在循环浏览一些结果，我想要一个隐藏按钮来隐藏一些额外的信息，例如日期！每个结果都将具有相同的类和Id名称，我需要这样做，所以如果用户单击日期上方的锚点，它将使用dom顺序中的下一个日期。
@foreach ($statuses as $status)
<h1>{{ $status->user->getNameOrUsername() }}</h1>
<a class="hide-date" href="#"><i class="fa fa-angle-double-down"></i> Hide</a>
<span class="date">{{ $status->created_at->diffForHumans() }}</span>
@endforeach
$(document).ready(function(){
$(".hide-date").click(function(){
$(".date").hide();
});
});
情况2
@foreach ($statuses as $status)
<div class="content">
<div class="top-wrapper">
<h1>{{ $status->user->getNameOrUsername() }}</h1>
<a class="hide-date" href="#"><i class="fa fa-angle-double-down"></i> Hide</a>
</div>
<div class="info-wrapper">
<span class="date">{{ $status->created_at->diffForHumans() }</span>
</div>
</div>
@endforeach
目前它隐藏了所有日期
span .date是单击的.hide-date元素的下一个同级元素。您可以使用.next()将其与单击的元素上下文this:一起作为目标
$(".hide-date").click(function(){
$(this).next().hide();
});
情况2的解决方案：
$(".hide-date").click(function(){
$(this).closest('.content').find('.date').hide();
});
$(document).ready(function(){
$(".hide-date").click(function(){
$(this).parent().find(".date").hide();
});
});
如果我以后想更改顺序，我有时会这样做。siblings((也可以。
使用.on((也是一种很好的做法
$(document).ready(function(){
$(".hide-date").on('click',function(){
$(this).parent().find(".date").hide();
});
});
这可以帮助您
$(document).ready(function(){
$(".hide-date").click(function(){
$(this).next(".date").hide();
});
});