3つのカウンタを持つリストの要素を表示

Question

このブートストラップのページングがあり、残りの要素を隠して3つしか表示できませんが、 をクリックするとすべての要素が表示されますが、 という10個のリスト項目すべてが表示されます。私はちょうど 次の3つの要素を表示し、前と次の3つのように の前と次のボタンで隠したいと思います。

これは、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>