javascript - jQuery 分页下一页和上一页按钮在达到零或过去最后一页后失败

Question

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

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

jsFiddle:https://jsfiddle.net/s7ac8aq3/

$(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 的值有时会存储为字符串。因此，在 JavaScript 中添加 "3"+1 会生成 "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/

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