jQuery 文章分页（拆分长文章）

Question

我正在尝试使用 jQuery 插件对我的“非常”长文章进行分页， 如果我离线保存页面并添加插件，效果很好！ 但是当我尝试将代码添加到我的脚本时它会变得混乱 github上的插件：https://github.com/yak0d3/senzill-pagination 我的代码： 我将 id=wrapper style=visibility:hidden 添加到内容 div

 <div class="card-body" id="wrapper" style="visibility:hidden;">
                    <div class="list-item mb-3">
                        <div class="list-left">
                            <a href="{{ url('/profile/' .$post->user->username) }}">
                            @if (!empty($post->user->social_id))
                            <img class="avatar img-fluid rounded-circle" src="{{ $post->user->avatar }}">
                            @else
                            <img class="avatar img-fluid rounded-circle" src="{{ url('/images/' . $post->user->avatar) }}">
                            @endif
                            </a>
                        </div>         
                        <div class="list-body">
                            <div class="text-ellipsis">
                                <a class="nocolor" href="{{ url('/profile/' .$post->user->username) }}">{{ $post->user->name }}</a>
                                <small class="text-muted time">{{ $post->created_at->diffForHumans() }}</small>
                            </div>
                            <div class="text-ellipsis">
                                <small class="text-muted">{{ $post->user->username }}</small>
                                @if (count($post->tags))
                                @foreach ($post->tags as $tag)
                                <small class="text-muted time"><a href="{{ url('/category/' . $tag->name) }}">
                                    #{{ $tag->name }}
                                </a></small>
                                @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                    <h1>{{ $post->post_title }}</h1>
                    @if (!empty($post->post_desc))
                    <p>
                        {{ $post->post_desc }}
                    </p>
                    @endif
                    @if (!empty($setting->post_ads))
                    <p>
                        {!! $setting->post_ads !!}
                    </p>
                    @endif
                @if($post->contents)
                    @foreach ($post->contents as $content)
                    @if ($content->type == "header")
                    <h4>{{ $content->body }}</h4>
                    @endif

                    @if ($content->type == "text")
                    <p>{{ $content->body }}</p>
                    @endif

                    @if ($content->type == "txteditor")
                    {!! clean( $content->body ) !!}
                    @endif

                </div>

然后我添加了脚本

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

                <!-- senzill-pagination.js -->
    <script src="{{ asset('/js/senzill-pagination.js') }}"></script>
    <script>
        $(document).ready(function(){
          var _elPerPage = 10;
          var number_of_pages = Math.ceil($('p').length / _elPerPage);
          function stats(){
            if($('#elPerPage').val() > 0)
             {
               _elPerPage = $('#elPerPage').val();
             }
             number_of_pages = Math.ceil($('p').length / _elPerPage);
             $('#number_of_pages').text(number_of_pages);
             $('#elements_per_page').text(_elPerPage);
          }
          var senzill =  $('#wrapper').senzill(
                {
                    elPerPage: _elPerPage
                }
            );
          stats();
          $('#set_elems_per_page').on('click',function(){
            if($('#elPerPage').val() > 0){
               _elPerPage = $('#elPerPage').val();
             }
             _elPerPage = $('#elPerPage').val();
             console.log(_elPerPage);
             senzill.destroy();
             senzill = undefined;
             senzill =  $('#wrapper').senzill(
               {
                  elPerPage: _elPerPage
               });
             stats();
          });
        });
    </script>

似乎内容保持隐藏并且脚本显示 我还尝试在 div 上添加脚本没有用 我也把jquare加到了头上，但还是一样.. 请..这是我第一次使用stackoverflow，因为我不是程序员，我希望大家能帮助我.. 谢谢

Answer 1

已解决 好像我把脚本放在同一个隐藏的 div 上 将其更改为按钮使其可以工作，但加载/导航到页面需要很长时间 将近 20 多岁 这个分页的任何提示：/？