Question

上一页和下一页按钮没有限制，即：可以在第一页和最后一页之前和之后移动......似乎无法限制此。

我创建了if语句来尝试阻止按钮执行但它不起作用。有任何想法吗？

$(function() {

    $(document).ready(function(){

        //amount of items on page
        var num = $('.post').length;

        //set items per page
        var itemsPerPage = 1;

        var nav = false;

        //array of all items
        var items = $(".post");

        //rounds up to the nearest whole number -- number of pages needed to display all results
        var numOfPages = Math.ceil((num / itemsPerPage));

        //container div
        var paginationContainer = $("#pagination-container");

        //initial link num
        var linkNum = 1;

        paginationContainer.prepend("<button class='pagination' id='btn-prev' value='prev'>Prev</button>");

        //creates all pagination links as input buttons (can be anything... li, a, div, whatever)
        for(i = 0; i < numOfPages; i++)
        {

            paginationContainer.append("<button class='pagination' id='btn-" + (i + 1) +"' " + "value='" + (i + 1) + "'>" + (i + 1) + "</button>");

        }

        paginationContainer.append("<button class='pagination' id='btn-next' value='next'>Next</button>");

        //does the initial filtering of the items, hides anything greater than page 1
        items.filter(":gt(" + (itemsPerPage -1) + ")").hide();

        //finds the input feilds and executes onclick
        paginationContainer.find('button').on('click', function(){

            //REQUIRED RESETS NAV BOOL SO CLICKS WILL REGISTER
            nav = false;


            //stores the value of the link in this var
            var val = $(this).val();

             //if value is next or prev
            if(val == "prev")
            {
                if(linkNum > 1)
                {
                    nav = true;
                    linkNum = linkNum - 1;
                    var currentBtn = paginationContainer.find("#btn-" + linkNum);
                    var otherButtons = paginationContainer.find('button');
                    otherButtons.attr('class', "pagination");
                    currentBtn.attr('class', "current");
                    currentBtn.focus();
                }
            }
            else if (val == "next")
            {
                if(linkNum < numOfPages)
                {
                    nav = true;
                    linkNum = linkNum + 1;
                    var currentBtn = paginationContainer.find("#btn-" + linkNum);
                    var otherButtons = paginationContainer.find('button');
                    otherButtons.attr('class', "pagination");
                    currentBtn.attr('class', "current");
                    currentBtn.focus();
                }
            }

            if(nav == false)
            {   
                //reoves the current class from all buttons before reassigning
                var otherButtons = paginationContainer.find('button');
                linkNum = $(this).val();

                otherButtons.attr('class', "pagination");

                //assigns current class to current button
                $(this).attr("class", "current");
            }

            //creates an array of items to hide based on if the set results are less than the link num
            var itemsToHide = items.filter(":lt(" + ((linkNum-1) * itemsPerPage) + ")");

            // adds any items that are greater than the set results from the link num to the hide array
            $.merge(itemsToHide, items.filter(":gt(" + ((linkNum * itemsPerPage) -1) + ")"));

            // hides the items in hide array
            itemsToHide.hide();

            //shows all items NOT in the hide array
            var itemsToShow = items.not(itemsToHide);
            itemsToShow.show();


        });



    });



});

Answer 1

对你的jsFiddle进行一点调试就发现了问题。在这部分代码中：

        } else if (val == "next") {
            if (linkNum < numOfPages) {
                nav = true;
                linkNum = linkNum + 1;

linkNum的值有时会被存储为字符串。因此，添加"3"+1会在JavaScript中生成"31"。

简单的解决方案是在添加之前将其转换为整数：

                linkNum = parseInt(linkNum,10) + 1; // always use a radix

https://jsfiddle.net/mblase75/s7ac8aq3/3/

但是，我倾向于从源头解决问题，几行：

if (nav == false) {
            var otherButtons = paginationContainer.find('button');
            linkNum = $(this).val();

首先存储linkNum时，.val()会返回一个字符串。立即将其解析为整数：

            linkNum = parseInt($(this).val(),10);

https://jsfiddle.net/mblase75/s7ac8aq3/4/

然后在执行添加之前不必更改它。

Answer 2

您在 linkNum 变量中的问题，当您点击某个页码时，变量会获得一个字符串值，之后当您尝试添加1时，您会收到一个新字符串，例如“3”+ 1 =＆gt; “31”，“4”+ 1 =＆gt; “41”

jQuery Pagination下一个和上一个按钮在击中零或过去最后一页后失败

2 个答案: