Question

点击auth-message锚点时，我在获取guest-like项时遇到问题。看起来jQuery无法找到auth-message项。我只是试图隐藏我点击的其中一条消息，而不是每一条消息。

这是视图的一部分

@forelse($product->reviews as $review)
                <div class="mt-5 border border-dark pl-3 pt-3 pb-3 mb-3 rounded reviewid" data-reviewid="{{ $review->id }}">
                    <div class="title">
                        <h4>{{ $review->headline }}</h4>
                    </div>
                    <div class="user-rating">
                        <star-rating class="pr-3" :star-size="20" :read-only="true" :show-rating="false" :rating="{{ $review->rating }}"></star-rating>
                    </div>
                    <div class="body-text pt-3 pr-5">
                        <p style="text-align:justify"><strong>{{ $review->description }}</strong></p>
                    </div>
                    <div class="body-text pt-3">
                        @if(Auth()->check())
                            <a href="" class="like mr-2"><i class="far fa-thumbs-up"></i></a>{{ $review->getLikes() }}
                            <a href="" class="like mr-2 ml-4"><i class="far fa-thumbs-down"></i><a>{{ $review->getDislikes() }}
                        @else
                        <div class="container">
                                <div class="row">
                                    <div class="alert alert-danger auth-message" style=" height:30px;" role="alert">
                                        <p style="line-height:5px">You should be authenticated for completing this action<span class="ml-2 close-span" style="cursor:pointer"><strong>x</strong></span></p>
                                    </div>
                                </div>
                            </div>
                            <a href="javascript:void(0)" class="guest-like mr-2"><i class="far fa-thumbs-up"></i></a>{{ $review->getLikes() }}
                            <a href="javascript:void(0)" class="guest-like mr-2 ml-4"><i class="far fa-thumbs-down"></i><a>{{ $review->getDislikes() }}
                        @endif
                    </div>
                    <div class="author pt-2">
                        <h6 class="text-muted">{{ $review->user_name }},  {{ date('d-m-Y', strtotime( $review->created_at )) }}</h6>
                    </div>
                </div>
                @empty
                <h6>There are not reviews for this product</h6>
                @endforelse

jQuery代码

$(document).ready(function(){
    $('.guest-like').click(function(){
     $(this).next('.auth-message').hide();
    });
    $(".close-span").click(function(){
      $(".auth-message").hide();
    });
});

Answer 1

您应该使用parent代替next

这是工作示例

 $('.guest-like').click(function(){
     $(this).parent().find('.auth-message').hide();
 });

Answer 2

试试这个，

$(document).ready(function(){
   $('.guest-like').click(function(){
     $(this).parent().find('.auth-message').hide();
   }); 
});

在jQuery中获取最接近的元素

2 个答案: