jQuery多次点击事件切换状态

今天的需求是这样。

移动端页面，有一篇比较长的文章，大概有二十几个段落。展现在用户面前的只是前面的六个段落，用户点击按钮，再展开六个段落，直到整个文章加载完毕，按钮内容变成“收起文章内容”。

好吧，无论以后别的项目是否需要整个功能，我先封装起来。

六个初始状态就是展开的段落，偷懒了下， 放在article_show的父元素下，而隐藏的，则放在 class 名为 article_lazy 的父元素下，这样写js可以省点事。

$(function () {
    function lazyLoad(article, showNum, btn, oHtml) {
        var oP = $(article).children();//需要隐藏的每个段落
        var num = 0;//初始化
        var oBtn = $(btn);//点击按钮
        var txt = oBtn.html();//保存按钮的html内容

        oBtn.on('click', function () {
            num++;//每次点击累计
            var len = showNum*num; //展现段落 = 每次点击要展开的段落数*点击次数
            for(var i=len-showNum; i<len; i++){  //开始循环的段落 = 展现段落-已经展现的段落
                //console.log(i);
                if(!oP.hasClass()){ //判断段落是否隐藏，如果隐藏
                    $(oP[i]).addClass("active");
                }
            }

            if($(oP[oP.length-showNum]).hasClass('active')){ //判断倒数showNum个段落是否隐藏，是否已到文章底部
                oBtn.text(oHtml).on('click', function () { //更改按钮的内容，绑定点击事件
                    oP.removeClass('active'); //点击后，段落全部隐藏。（偷懒不是英明的吧。。。）
                    oBtn.html(function () { //点击后，按钮内容切换为原来的内容。
                        return txt;
                    });
                });
            }
        })
    }
    lazyLoad('.article_lazy', 6, '.more','收起文章内容');

});