Элементы отображения в списке со счетчиком из трех

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>