在分页javascript中添加下一个按钮

Question

使用这个 js 分页，我想获得一些关于如何添加下一个和上一个按钮的帮助。此外，我一直在努力使 OL 具有动态性，并且具有与内容一样多的页面。一些帮助将不胜感激。 jfiddle.

 pageSize = 3;

 showPage = function(page) {
 $(".content").hide();
 $(".content").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
});        
}

showPage(1);

<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>

<ol id="pagin">
        <li><a class="current" href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
</ol>

Answer 1

使用您的代码，这是我的答案：http://jsfiddle.net/jfm9y/405/ 您需要的一切都在那里。如果你有更多的 div，它会继续进一步，它是动态的。

希望对你有帮助

JS：

pageSize = 3;
var i = 1;
showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}

showPage(i);

$("#previous").click(function() {
    $("#next").removeClass("current");
    $(this).addClass("current");
    if (i != 1) {
      showPage(--i);
    }
});
$("#next").click(function() {
    $("#previous").removeClass("current");
    $(this).addClass("current");
    if (i < ($('.content').length)/3) {
      showPage(++i);
    }    
});

一点HTML修改：

<ol id="pagin">
            <li><a id='previous' class="current" href="#">Previous</a></li>
            <li><a id='next' href="#">Next</a></li>
</ol>