查看更多按钮评论显示和隐藏过去列表答案

【问题标题】：see more button comment show and hide past list查看更多按钮评论显示和隐藏过去列表
【发布时间】：2017-06-26 23:01:50
【问题描述】：

当我点击查看更多时，我需要显示列表的数量并循环剩余的数量出现列表中的 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
            }
        });
});

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案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
        }
    });
  });

【讨论】：

@Enivsion thnx 但它不起作用检查这里codepen.io/hesham-farag/pen/rwGjQo
@HeshamFarag 你能更清楚一点吗？究竟是什么不工作？你在寻找什么行为？现在，当您单击显示更多时，它会向列表中添加 5 个列表项。您可以使用 count+3 或其他方式更改要添加的项目数，而不是显示更多功能。
对，我会向我展示 5 个列表并像 facebook 评论一样隐藏过去
你打算如何把那些隐藏的列表带回来？无论如何，要完成这项工作，您只需要进行一些小改动。我正在修改答案。
我已经更新了代码。现在它正在按照您的要求工作。 @HeshamFarag

【解决方案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

【讨论】：