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','收起文章內容');

});