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);
    }
});