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

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

2 个答案: