列表中的显示元素与三个计数器

Question

有这个引导程序分页，它显示所有10个列表项， 虽然我可以隐藏其余元素并只显示三个，但当我点击下一个所有元素得到显示时，我只想显示 接下来的三个元素，并隐藏上一个和下一个三个等等 与上一个和下一个按钮。

这是CSS：

<style> 
    .hide { 
     display: none; 
    } 
</style> 

这是HTML：

<div class="page"> 
    <nav> 
     <ul class="pagination pagination-lg"> 
      <li class="page-item"> 
       <span class="page-link prev" href="#" aria-label="Previous"> 
       <span aria-hidden="true">&laquo;</span> 
       <span class="sr-only">Previous</span> 
       </span> 
      </li> 
      <li class="page-item list"><a class="page-link" href="#">1</a></li> 
      <li class="page-item list"><a class="page-link" href="#">2</a></li> 
      <li class="page-item list"><a class="page-link" href="#">3</a></li> 
      <li class="page-item list"><a class="page-link" href="#">4</a></li> 
      <li class="page-item list"><a class="page-link" href="#">5</a></li> 
      <li class="page-item list"><a class="page-link" href="#">6</a></li> 
      <li class="page-item list"><a class="page-link" href="#">7</a></li> 
      <li class="page-item list"><a class="page-link" href="#">8</a></li> 
      <li class="page-item list"><a class="page-link" href="#">9</a></li> 
      <li class="page-item list"><a class="page-link" href="#">10</a></li> 
      <li class="page-item"> 
       <span class="page-link next" href="#" aria-label="Next"> 
        <span aria-hidden="true">&raquo;</span> 
        <span class="sr-only">Next</span> 
       </span> 
      </li> 
     </ul> 
    </nav> 
</div> 

这是jQuery的：

<script> 
    $(document).ready(function() { 
     $(".list").slice(3).addClass('hide'); 
     $("li:last-child").removeClass('hide'); 
     $('.next').click(function() { 
      $('ul li').removeClass('hide'); 
     }); 
    }); 
</script> 

这是JS提琴： https://jsfiddle.net/5d7kz732/

Answer 1

那么，你的$('.next').click(function() {中几乎没有任何东西。

我添加了一个var position = 0;来跟踪当前位置，并添加3到它，每当我们点击。

if(list.length < position + 3) return检查，这样我们就不会再去掉所有元素的长度。

list.slice(0, position).addClass('hide'); 
list.slice(position + 3).addClass('hide'); 

隐藏其余。

，使之成为后退按钮工作

$('.prev').click(function() { 
    if(0 > position - 3) return position = 0 
    position-=3; 
    $('ul li').removeClass('hide'); 
    list.slice(0, position).addClass('hide'); 
    list.slice(position + 3).addClass('hide'); 
    $("li:last-child").removeClass('hide'); 
    }); 

$(document).ready(function() { 
 
    var list = $(".list") 
 
    list.slice(3).addClass('hide'); 
 
    $("li:last-child").removeClass('hide'); 
 

 
    var position = 0; 
 

 
    $('.next').click(function() { 
 
    if (list.length < position + 3) return 
 
    position += 3; 
 
    $('ul li').removeClass('hide'); 
 
    list.slice(0, position).addClass('hide'); 
 
    list.slice(position + 3).addClass('hide'); 
 
    $("li:last-child").removeClass('hide'); 
 
    }); 
 

 
    $('.prev').click(function() { 
 
    if (0 > position - 3) return position = 0 
 
    position -= 3; 
 
    $('ul li').removeClass('hide'); 
 
    list.slice(0, position).addClass('hide'); 
 
    list.slice(position + 3).addClass('hide'); 
 
    $("li:last-child").removeClass('hide'); 
 
    }); 
 

 
});

.hide { 
 
     display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page"> 
 
    <nav> 
 
    <ul class="pagination pagination-lg"> 
 
     <li class="page-item"> 
 
     <span class="page-link prev" href="#" aria-label="Previous"> 
 
       <span aria-hidden="true">&laquo;</span> 
 
     <span class="sr-only">Previous</span> 
 
     </span> 
 
     </li> 
 
     <li class="page-item list"><a class="page-link" href="#">1</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">2</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">3</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">4</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">5</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">6</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">7</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">8</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">9</a></li> 
 
     <li class="page-item list"><a class="page-link" href="#">10</a></li> 
 
     <li class="page-item"> 
 
     <span class="page-link next" href="#" aria-label="Next"> 
 
       <span aria-hidden="true">&raquo;</span> 
 
     <span class="sr-only">Next</span> 
 
     </span> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>