Question

我试图想出一个简单的方法来使用jquery来获得5个项目的列表，然后按下箭头，它会显示另外5个项目，依此类推。如果向上和向下箭头在到达顶部和底部时会后退，这将是一个加号。任何帮助将不胜感激。

Answer 1

这应该有效，经过测试

<script type="text/javascript">
    $(document).ready(function() {
        //hide all list items, and show the first 5 items
        $('#items li').hide().slice(0, 5).show();
        //hide the up button
        $('#up').hide();

        var length = $('#items li').length;
        var current_page = 0;
        var per_page = 5;

        $(".arrow").click(function(){
         var arrow = $(this).attr("id"); 
         if(arrow == 'down') {
          current_page = current_page + 1; //increment the page
          if (length >= current_page*per_page) { //check if it's possible page
           $('#items li').hide().slice((current_page*per_page), (current_page*per_page+per_page)).fadeIn(); //show the next page
          }
         } 
         else if(arrow == 'up') {
          current_page = current_page - 1; //decrement the page  
          if (current_page >= 0) { //check if it's possible page
           $('#items li').hide().slice((current_page*per_page), (current_page*per_page+per_page)).fadeIn(); //show the prev page
          }
         }
         //check if the down button will be still shown or hidden
          if (length >= (current_page+1)*per_page) $('#down').show();
          else $('#down').hide();
         //check if the up button will be still shown or hidden
          if ((current_page-1) >= 0) $('#up').show();
          else $('#up').hide();
        });
    });
    </script>

<img src="./up.jpg" id="up" class="arrow">
<img src="./down.jpg" id="down" class="arrow">
<ul id="items">
  <li>1</li>
  ....
  <li>30</li>
</ul>

Answer 2

jquery有很多分页插件。它会通过调整项目的某些代码来节省您的时间。

http://blog.ajaxmasters.com/jquery-pagination-plugin/

http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

http://web.enavu.com/tutorials/making-a-jquery-pagination-system/

或者如果你想自己做，那就是这样的

<img src="./up.jpg" id="up" class="arrow">
<img src="./down.jpg" id="down" class="arrow">
<ul id="items">
  <li>1</li>
  ....
  <li>30</li>
</ul>

<script type="text/javascript">
  $(document).ready(function() {
    $('#items li').hide().slice(0, 4).show();

    $(".arrow").click(function(){
      var arrow = $(this).attr("id");
      if(arrow == 'down') {
         $('#items li:visible').last().nextAll().slice(0, 4).show("slow");
         //or $('#items li:hidden').slice(0, 4).show("slow");
      } 
      else if(arrow == 'up') {
         $('#items li:visible').slice(-1, -4).hide("slow");
      }
      if ($('#items li:visible').length > 0)  $('#up').fadeOut();
      else  $('#up').show();
      if ($('#items li:hidden').length > 0)  $('#down').show();
      else $('#down').fadeOut();
    });
  });
</script>

ps：我无法测试它

Jquery向下滑动箭头

2 个答案: