もっと見るボタンのコメントを見る前のリストを表示して非表示にする

Question

リストの番号を表示し、残りの番号をループする必要があります。リストを6つ表示し、残りの部分をスライスして戻るボタンをクリックします。

https://codepen.io/hesham-farag/pen/Ngadvj

<div class="comment-box-container"> 
<div class="comment-box"> 

      <div class="user-comment-box">0</div> 
      <div class="user-comment-box">1</div> 
      <div class="user-comment-box">2</div> 
      <div class="user-comment-box">3</div> 
      <div class="user-comment-box">4</div> 
      <div class="user-comment-box">5</div> 
      <div class="user-comment-box">6</div> 
      <div class="user-comment-box">7</div> 
      <div class="user-comment-box">8</div> 
      <div class="user-comment-box">9</div> 
      <div class="user-comment-box">10</div> 
      <div class="user-comment-box">11</div> 
      <div class="user-comment-box">12</div> 
      <div class="user-comment-box">13</div> 
      <div class="user-comment-box">14</div> 
      <div class="user-comment-box">15</div> 
      <div class="user-comment-box">16</div> 
      <div class="user-comment-box">17</div> 
      <div class="user-comment-box">18</div> 
      <div class="user-comment-box">19</div>x"> 
    <button class="see-more">See More...</button> 
    </div><!--comment-box end--> 
</div><!-- comment-box-container end--> 

.user-comment-box { display:none; 
} 

$(function(){ 
     // select the first 5 hidden divs 

    $(".comment-box").each(function(index) { 
$(this).children(".user-comment-box").slice(-5).show(); 
}); 

     $(".see-more").click(function(e){ // click event for load more 
      e.preventDefault(); 
      var done = $('<div class="see-more=done">done</div>'); 
      $(this).siblings(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them 
      if($(this).siblings(".user-comment-box:hidden").length == 0){ // check if any hidden divs 
       $(this).replaceWith(done); // if there are none left 
      } 
     }); 
}); 

ありがとう！

Answer 1

ここで作業コードです：

$(function(){ 
    // select the first 5 hidden divs 
var count = 5; 
var currentCount = 0; 
$(".comment-box").each(function(index) { 
$(this).children(".user-comment-box").slice(0,count).show(); 
    currentCount = count; 
}); 

    $(".see-more").click(function(e){ // click event for load more 
     e.preventDefault(); 
     $(".comment-box")children(".user-comment-box").slice(0,count).hide(); 
     var done = $('<div class="see-more=done">done</div>'); 
     $(this).siblings(".user-comment-box").hide(); 
     $(this).siblings(".user-comment-box:hidden").slice(currentCount,currentCount + count).show(); // select next 5 hidden divs and show them 
     currentCount +=count; 
     if($(this).siblings(".user-comment-box").length == currentCount){ // check if any hidden divs 
      $(this).replaceWith(done); // if there are none left 
     } 
    }); 
    }); 

Answer 2

は、私は答えを見つけ、このリンクに入れ、誰もが

link

$(document).ready(function() { 
    var $pagination = $(".pagination"); 
    var $lis = $pagination.find("li:not(#prev, #next)"); 
     $lis.filter(":gt(3)").hide(); 
     $lis.filter(":lt(5)").addClass("active"); 

    var $next = $("#next").click(function() { 
     var idx = $lis.index($lis.filter(".active:last")) || 0; 
     var $toHighlight = $lis.slice(idx + 1, idx + 6); 
     $(".prev").show(); 
     if ($toHighlight.length == 0) { 
     $prev.show(); 
     return; 
    } 

    $next.show(); 
    $lis.filter(".active").removeClass("active").hide(); 
    $toHighlight.show().addClass("active"); 
    }); 

    var $prev = $("#prev").click(function() { 
    var idx = $lis.index($lis.filter(".active:first")) || 0; 

    var start = idx < 4 ? 0 : idx - 3; 
    var $toHighlight = $lis.slice(start, start + 5); 
    if ($toHighlight.length == 0) { 
     $prev.hide(); 
     return; 
    } 

    $next.show(); 
    $lis.filter(".active").removeClass("active").hide(); 
    $toHighlight.show().addClass("active"); 
    }); 
}); // close jquery