CSS Div скрытые не работает хорошо в laravel 5

Я использую Css, чтобы скрыть комментарий с div hidden, если пользователь нажал load more, комментарий будет показан. Но если было несколько статусов. Все комментарии будут загружаться togather при нажатии кнопки. В чем здесь проблема?

<style>

/*Comment pagination*/
#comment {
display:none;
}
</style>

Это мой взгляд

 @if($post->comments()->count()===0)
                            @else
<div class="inner-all block">
   <a href="#" id="loadMore-{{$post->id}}" class="btn btn-primary btn-sm" style="margin-top:3px; ">Load More Comment ({{ $post->comments()->count() }})</a>
</div>
@endif

И это мой комментарий Div

@foreach($post->comments as $comment)
                                <div id="comment">
                            <div class="line no-margin"></div><!-- /.line -->

                            <div class="media inner-all no-margin">
                                <div class="pull-left">
                                    <img src="{{ asset('user_profile_image/'. $comment->user->profile_image) }}" alt="{{$comment->user->name}}" class="img-post2">
                                </div><!-- /.pull-left -->
                                <div class="media-body">
                                    <a href="{{ route('profile.index',['id'=>$comment->user->id]) }}" class="h4"><span style="font-size: medium;">{{$comment->user->name}}</span></a>
                                    <medium class="block text-muted">{{ $comment->comment }}</medium><br>
                                    <em class="text-xs text-muted">Posted on <span class="text-danger">{{$comment->created_at->diffForHumans()}}</span></em>
                                </div><!-- /.media-body -->
                            </div><!-- /.media -->
                                </div>
                                @endforeach

Затем я использую javascript для обнаружения действия.

 @foreach($posts as $post)
<script>
    $(function () {
        $("#comment").slice(0, 4).show();
        $("#loadMore-{{$post->id}}").on('click', function (e) {
            e.preventDefault();
            $("div:hidden").slice(0, 18).slideDown();
            if ($("div:hidden").length == 0) {
                $("#load").fadeOut('slow');
            }
            /**
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1500);
             **/
        });
    });

</script>
@endforeach

Я ожидаю, используя другой id, чтобы отслеживать, какой div должен быть активен, но, кажется, не работает. Есть предложения?

2 ответа

  1. Вы даете все ваши divs, содержащие комментарии id id="comment". Затем в JavaScript вы выбираете каждый элемент с идентификатором"#comment", который является всеми вашими комментариями. Лучшее решение-дать вашим комментариям другой идентификатор.

  2. может быть, вы можете попробовать использоватьthis, чтобы получить различные div

     $("div:hidden")
    

    к

    $(this)
    

    и id="comment"уникальна, перемена к class="comment"лучшему в форе !