javascript - 制作一个 "Load More"按钮，显示我博客上的另外 2 篇文章

Question

我想制作一个按钮或链接，单击时将显示我存储在索引中的下两个 div(文章)。有点像无限滚动的 tumblr 效果。这是我能得到的最接近的。要么不显示任何 div，要么显示所有 div。

 <div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Title
                    </h2>
                    <h3 class="post-subtitle">
                        Description
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">Trevor Healy</a> on September 24, 2014</p>
            </div>
            <hr>
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Title
                    </h2>
                    <h3 class="post-subtitle">
                        Description
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">Trevor Healy</a> on September 18, 2014</p>
            </div>
 <!-- Pager -->
            <ul class="pager">
                <li class="next">
                    <a href="#" id="load">Older Posts &rarr;</a>
                </li>
            </ul>


            <hr>
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Title
                    </h2>
                    <h3 class="post-subtitle">
                        Description
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">Trevor Healy</a> on August 24, 2014</p>
            </div>
            <hr>
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Title
                    </h2>
                    <h3 class="post-subtitle">
                        Description
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">Trevor Healy</a> on July 8, 2014</p>
            </div>
            <hr>
            </div>
    </div>
</div>

我有一个 css 文件存储:

.post-preview { display:none; }

这是我在页面上运行的脚本:

    <script>
$(function(){
    $(".post-preview").slice(0, 2).show(); // select the first two
    $("#load").click(function(e){ // click event for load more
        e.preventDefault();
        $(".post-preview:hidden").slice(0, 2).show(); // select next two hidden divs and show them

    });
});

 </script>

Answer 1

内容正确 - 未加载 JQuery 库。