Question

我正在使用Css隐藏div隐藏的注释，如果用户点击加载更多注释将显示。但如果有多个状态。单击按钮时，所有注释都将加载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

这是我的评论分区

@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应该是活动的，但似乎不起作用。这里有什么建议吗？

Answer 1

您为包含注释{id} id="comment"的所有div添加内容。然后在JavaScript中，选择标识为"#comment"的每个元素，这是您的所有评论。最佳解决方案是为您的评论提供不同的ID。

Answer 2

也许您可以尝试使用this来获得不同的div

 $("div:hidden")

到

$(this)

且id="comment"是唯一的，更改为class="comment"在foreach中更好！

CSS Div在laravel 5中隐藏得不好用

2 个答案: