Question

我循环浏览了一些结果，我想要一个隐藏按钮来隐藏一些额外的信息，例如日期！如果用户在dom顺序中使用下一个日期的日期上方点击锚点，则每个结果将具有相同的类和Id名称。

@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();
});

Answer 2

$(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();
    });
});

Answer 3

这可以帮到你

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

jQuery在dom上按位置隐藏下一个元素

3 个答案: