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“