Javascript 如何使jquery先显示1个数据，然后在单击“显示更多”后再加载1个数据

首先，我想只有一个博客块将显示和显示更多。 当我点击ShowMore时，它将显示一个博客块，如果再次点击ShowMore，它将再次显示一个博客块。所有blog块显示后，“显示更多”按钮将隐藏。你们能帮帮我吗

<!--  BLOG BLOCK 1  -->
<div class="blog-block">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog1.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
        <a href="blog_single.html">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
        <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

        <!--  BLOG INFO  -->
        <div class="blog-info">
            <a href="#">
                <strong>Admin</strong>
            </a>
            <a href="#">
                <strong>Photography</strong>
            </a>
            <a href="#">
                <strong>Comments</strong>
            </a>
            <span class="fa fa-comment">10</span>
        </div>
        <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
        <span class="day">25</span>
        <span class="month">nov</span>
    </div>       
    <!--  //BLOG DATE  -->                     
</div>  
<!--  //BLOG BLOCK 1  --> 

<!--  BLOG BLOCK 2  -->
<div class="blog-block">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog2.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
        <a href="#">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
        <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

        <!--  BLOG INFO  -->
        <div class="blog-info">
            <a href="#">
                <strong>Admin</strong>
            </a>
            <a href="#">
                <strong>Photography</strong>
            </a>
            <a href="#">
                <strong>Comments</strong>
            </a>
            <span class="fa fa-comment">10</span>
        </div>
        <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
        <span class="day">25</span>
        <span class="month">nov</span>
    </div>       
    <!--  //BLOG DATE  -->                     
</div>  
<!--  //BLOG BLOCK 2  --> 

<!--  BLOG BLOCK 3  -->
<div class="blog-block">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog3.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
        <a href="#">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
        <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

        <!--  BLOG INFO  -->
        <div class="blog-info">
            <a href="#">
                <strong>Admin</strong>
            </a>
            <a href="#">
                <strong>Photography</strong>
            </a>
            <a href="#">
                <strong>Comments</strong>
            </a>
            <span class="fa fa-comment">10</span>
        </div>
        <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
        <span class="day">25</span>
        <span class="month">nov</span>
    </div>       
    <!--  //BLOG DATE  -->                     
</div>  
<!--  //BLOG BLOCK 3  --> 

<!--  SHOW MORE BLOGS  -->
<div class="show-more">load more posts</div>
<!--  //SHOW MORE BLOGS  -->
<script>
    $('.show-more').on('click', function(){
        var mymore = '';
    });
</script>

一种广受欢迎的全方位自然错误透视法，适用于各种不同类型的容器、容器、容器、容器、容器、容器、容器、容器等
10
25
十一月
一种广受欢迎的全方位自然错误透视法，适用于各种不同类型的容器、容器、容器、容器、容器、容器、容器、容器等
10
25
十一月
一种广受欢迎的全方位自然错误透视法，适用于各种不同类型的容器、容器、容器、容器、容器、容器、容器、容器等
10
25
十一月
加载更多的帖子
$（'.show more'）。在（'click'，function（）上{
var mymore=''；
});

默认情况下，通过添加

hide

类来隐藏除第一个块之外的所有

blog块

元素。然后单击事件删除

hide

class from

blog block

元素。您可以在此处检查工作代码

JS-Bin
一种广受欢迎的全方位自然错误透视法，适用于各种不同类型的容器、容器、容器、容器、容器、容器、容器、容器等
10
25
十一月
一种广受欢迎的全方位自然错误透视法，适用于各种不同类型的容器、容器、容器、容器、容器、容器、容器、容器等
10
25
十一月
一种广受欢迎的全方位自然错误透视法，适用于各种不同类型的容器、容器、容器、容器、容器、容器、容器、容器等
10
25
十一月
加载更多的帖子
$（'.show more'）。在（'click'，function（）上{
$（'.blog block.hide:lt（1）'）.removeClass（'hide'）；
如果（$（'.blog block.hide'）。长度==0）{
$（this.hide（）；
}
});

忘记所有

$（this.hide（）最后在单击事件中。检查更新的链接，但我不希望在显示更多单击时显示所有链接。我想让它1比1显示它仍然显示隐藏类的其余部分，先生。条件是“显示更多”将在每次单击时显示一个类bog块。它工作得很好，先生，但我只是在考虑项目上线后的长期情况。它将有一堆博客，我必须设置为更大的默认值。示例5第一次显示数据，当我单击“显示更多”时，它将显示另外5个数据？如果要显示新的5篇文章，请使用
$（'.blog block.hide:lt（5））.removeClass（'hide'）lt（5）可以是您想要的任何数字。只需在answer.checkit中插入代码段即可