Question

我需要为以下逻辑写一个代码段

如果我单击第1页，则应转到第1页，然后在随后的页面中依次显示1,2,3。反之亦然。如果我在第3页，则应显示前一页对于第2页

请帮帮我。预先感谢

这里是my code：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
 var totalrows = $(".divControl").length;
 var pageSize=4;
 var noOfPage = totalrows/pageSize;
 noOfPage = Math.ceil(noOfPage);
 for(var i=1;i<=noOfPage;i++)
  {
   $("#divPages").append('<div class="page">'+i+'</div>'); 
  }
  var totalPagenum = $("div.page").length;
  if(totalPagenum >5)
  {
   $("div.page").hide();
   for(var n=1;n<=5;n++)
   {
    $("div.page:nth-child("+n+")").show();
   }
  }
  else{
 $("div.next").hide();
   $("div.prev").hide();
  }
  $("div.divControl").hide();
 for(var j=1;j<=pageSize;j++)
  {
    $("div.divControl:nth-child("+j+")").show();
  }
  displayevent();
   $("div.next").click(function(){
   if($("div.selected:last").nextAll('div.page').length > 5)
  {
    $("div.selected.active").next("div").addClass("active");
           $("div.selected.active").prev("div").removeClass("active");
       console.log("if")
       $("div.selected").last().nextAll(':lt(2)').show();
       $("div.selected").hide();
       displayevent();
       //lastposevent();
       $("div.prev").show();
       $("div.next").show();
   }
   else{
    console.log("else")
    $("div.divControl.active").next("div.page").addClass("active");
    $("div.divControl.active").prev("div.page").removeClass("active");
    $("div.selected").last().nextAll().show();
    $("div.selected").hide();
    displayevent();
    $("div.next").hide();
    $("div.prev").show();
   }
  });
  $("div.prev").click(function(){
  if($("div.selected:first").prevAll('div.page').length > 5)
  {
       $("div.selected").first().prevAll(':lt(2)').show();
       $("div.selected").hide();
       $("div.prev").show();
       $("div.next").show();
       displayevent();
  }
  else{
  $("div.selected").first().prevAll().show();
       $("div.selected").hide();
       $("div.prev").hide();
       $("div.next").show();
       displayevent();
       }
  });
 $("div.page").click(function(){
  var currentPage = $(this).text();
      $("div.divControl").hide();
   for (var k = (currentPage * pageSize) - (pageSize-1); k <= (currentPage * pageSize); k++) 
  {
    $("div.divControl:nth-child("+k+")").show();
  } 
   // $(".div.divControl").removeClass("active");
           //console.log($(".pagination li.active").index()+1);        
           $(this).addClass("active");
           console.log($(this).index()+2);

           //var ss = $("div.divControl.active").index()+1
            //$('div.divControl:nth-child('+ ss +')').addClass("active")
            $(this).addClass('active').siblings().removeClass('active'); 
  });
});
function displayevent()
{
  $("div.page").each(function(){
   if( $(this).css('display') === 'block') {
$(this).addClass('selected');
  }
  else{
  $(this).removeClass('selected');
  }
  });
}
</script>
</head>
<body>

<div class="divControl">Abi</div>
<div class="divControl">Anant</div>
<div class="divControl">balraj</div>
<div class="divControl">devi</div>
<div class="divControl">manasha</div>
<div class="divControl">mani</div>
<div class="divControl">nimmi</div>
<div class="divControl">god</div>
<div class="divControl">gopal</div>
<div class="divControl">Abi</div>
<div class="divControl">Anant</div>
<div class="divControl">balraj</div>
<div class="divControl">devi</div>
<div class="divControl">manasha</div>
<div class="divControl">mani</div>
<div class="divControl">nimmi</div>
<div class="divControl">god</div>
<div class="divControl">gopal</div>
<div class="divControl">Abi</div>
<div class="divControl">Anant</div>
<div class="divControl">balraj</div>
<div class="divControl">devi</div>
<div class="divControl">manasha</div>
<div class="divControl">mani</div>



<div class="pagination">

<div class="prev">prev</div>
<div id="divPages"></div>
<div class="next">next</div>
</div>
<style type="text/css">
  .pagination > div {
    display: inline-block;
    padding: 15px;
    cursor: pointer;
}
#divPages .page.selected {
    display: inline-block;
    padding: 15px;
    cursor: pointer;
}
.active{
  color:orange;
}
</style>
</body>
</html>

动态分页与上一个下一个

0 个答案: