Jquery下一个按钮在最后没有项目时不停止

Question

小提琴： http ： //jsfiddle.net/dpD56/4

我在列表中添加了“下一个上一个”按钮，将列表拆分为多个部分。

这是HTML：

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
</ul>

<button id="prev" type='button'>prev</button>
<button id="more" type='button'>next</button>

我正在使用以下js代码来使用Next Previous按钮。

这是JS：

var pageNumber = 1;
$(document).ready(function () {
    showPage(pageNumber);

    $('#prev').click(function () {
       pageNumber--;
       showPage(pageNumber);
    });

    $('#more').click(function () {
       pageNumber++;
       showPage(pageNumber);
    });

    $('#goto').click(function () {
       pageNumber = +$("#page").val();

       if (!pageNumber) {
            pageNumber = 1;   
       }

       showPage(pageNumber);
    });
});

function showPage(page) {
    var start = (5 * page) - 5;
    var showListItems = $("#test li").splice(start, 5);

    console.log(start, showListItems);

    $("#test li").hide();
    $(showListItems).show();
}

此代码适用于“下一个”和“上一个”按钮，但是当最后没有项目时，“下一个”和“上一个”按钮不会停止。

当最后一个项目之后没有更多项目时，下一个按钮应该被禁用或者不应该工作;当没有前一个项目时，上一个按钮也应该停止工作，或者当没有更多项目时应该禁用它。

但是这些按钮正在执行其功能，即使没有更多项目，并且它们显示带有NEXT PREVIOUS BUTTON的空白页面。

Answer 1

请在下面找到有效的解决方案：

const ITEMS_PER_PAGE = 5;

var pageNumber = 1;
var totalNumberOfPages;

$(document).ready(function () {
    totalNumberOfPages = $("#test").find("li").length;
    console.log(totalNumberOfPages);

    showPage(pageNumber);

    $('#prev').click(function () {
       pageNumber--;
       showPage(pageNumber);
    });

    $('#more').click(function () {
       pageNumber++;
       showPage(pageNumber);
    });

    $('#goto').click(function () {
       pageNumber = +$("#page").val();

        if (!pageNumber) {
            pageNumber = 1;   
        }

        showPage(pageNumber);
    });
});

function showPage(page) {
    var start = (ITEMS_PER_PAGE * page) - ITEMS_PER_PAGE;
    var showListItems = $("#test li").splice(start, ITEMS_PER_PAGE);

    if (start == 0) {
        $("#prev").prop('disabled', true);
    } else {
        $("#prev").prop('disabled', false);
    }

    if (start >= totalNumberOfPages - ITEMS_PER_PAGE) {
        $("#more").prop('disabled', true);
    } else {
        $("#more").prop('disabled', false);
    }

    console.log(start, showListItems);

    $("#test li").hide();
    $(showListItems).show();
}

当我们在第一页和最后一页时，我添加了一些检查以禁用上一个和下一个按钮。

此外，由于多次使用5次，我将其移动为常数。 通过这种方式，可以更轻松地查看此5的内容，并且只需更改常量的值即可更改每页的图像数量。

更新：

function showPage(page) {
    var start = (ITEMS_PER_PAGE * page) - ITEMS_PER_PAGE;
    var showListItems = $("#test li").splice(start, ITEMS_PER_PAGE);

    if (start == 0) {
        $("#prev").prop('disabled', true);
    } else {
        $("#prev").prop('disabled', false);
    }

    if (start >= totalNumberOfPages - ITEMS_PER_PAGE) {
        $("#prev").prop('disabled', true);
        $("#more").prop('disabled', true);
    } else {
        $("#more").prop('disabled', false);
    }

    console.log(start, showListItems);

    $("#test li").hide();
    $(showListItems).show();
}

或者您可以通过将这两行放入“发送”按钮的事件处理程序来禁用这两个按钮：

        $("#prev").prop('disabled', true);
        $("#more").prop('disabled', true);

Answer 2

这是你的解决方案：

首先，为列表的第一个元素指定一个id：

<ul id="test">
    <li id="firstLi">1</li>
    <li>2</li>

然后，在showPage（）函数中，您需要检查showListItems的大小，将其与$（#test li）的大小进行比较并相应地禁用按钮：

function showPage(page) {
    var start = (5 * page) - 5;
    var showListItems = $("#test li").splice(start, 5);

    if(showListItems.length < 5) {
        $('#more').prop('disabled', true);
        $("#test li").hide();
        $(showListItems).show();
    } else {
        if(showListItems[0].id === 'firstLi') {
            $('#prev').prop('disabled', true);
        }
        if($("#test li").length === (page * 5 )) {
            $('#more').prop('disabled', true);
        }
        $("#test li").hide();
        $(showListItems).show();
    }
    console.log(start, showListItems);    
}

最后，您需要启用按钮。 你可以用不同的方式做到这一点，但我选择了这种方式：

单击下一个按钮时启用prev按钮，反之亦然。

$('#prev').click(function () {
    pageNumber--;
    showPage(pageNumber);
    if($('#more').prop('disabled')) {
        $('#more').prop('disabled', false);
    }
});

$('#more').click(function () {
    pageNumber++;
    showPage(pageNumber);
    if($('#prev').prop('disabled')) {
        $('#prev').prop('disabled', false);
    }
});