javascript - jQuery 按 dom 上的位置隐藏下一个元素

Question

我正在循环访问一些结果，我想要一个隐藏按钮来隐藏一些额外的信息，例如日期!每个结果都将具有相同的类和 Id 名称，因此如果用户单击日期上方的 anchor ，它将使用 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

目前它隐藏了所有日期

Answer 1

span .date 是单击的 .hide-date 元素的下一个同级元素。您可以使用 .next() 将其与单击的元素上下文 this 一起定位:

$(".hide-date").click(function(){
    $(this).next().hide();
});

案例2的解决方案:

 $(".hide-date").click(function(){
    $(this).closest('.content').find('.date').hide();
});