如何添加上一个和下一个按钮?

时间:2015-10-01 14:21:35

标签: jquery

所以我的问题是,当用户点击下一个按钮时,它不会移动分页。

这是我的小提琴http://jsfiddle.net/jfm9y/821/所以任何建议如何解决这个问题?当我点击下一个或上一个时它会移动内容,但我无法获得突出显示的数字。

var pageSize = 3;
var currentpage = 1;
var pagecount = 0;
var page_count = document.getElementById('page_count').value;

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

showPage(1);

$("#pagin li a.numbers").click(function () {
    $("#pagin li a.numbers").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text()));
});

$("#pagin").on("click", "a", function (event) {
    if ($(this).html() == "next") {
        $("#pagin li a.numbers").removeClass("current");

        currentpage++;
        console.log(currentpage);
    }
    else if ($(this).html() == "prev") {
        currentpage--;
    }
    else {
        currentpage = $(this).html();
    }
    if (currentpage < 1) {
        currentpage = 1;
    }
    if (currentpage > page_count) {
        currentpage = page_count;
    }
    showPage(currentpage);
});

1 个答案:

答案 0 :(得分:2)

只需为每个按钮添加ID即可。像这样举例如:

<li><a id="btn1" class="current" href="#">1</a></li>
<li><a id="btn2" href="#">2</a></li>
<li><a id="btn3" href="#">3</a></li>
<li><a id="btn4" href="#">4</a></li>

并在showPage(currentpage);

之后将其添加到您的JS中
$(".current").removeClass("current");
$("#btn"+currentpage).addClass("current");