jQuery分頁下一頁和上一頁按鈕在打零或超過最後一頁後失敗

Question

上一頁和下一頁按鈕沒有限制，即：可以在第一頁和最後一頁之前和之後移動......似乎不能限制這一點。

我已經創建瞭如果語句試圖停止按鈕執行，但它不會工作。有任何想法嗎？

的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/

---

但是，我反而更喜歡從源頭上解決問題，幾行down：

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 =>「 31「，」4「+ 1 =>」41「