在 jQuery 点击功能上显示特定数量的 <div>

Question

在此按钮所在的每个页面上，将有 24 个.preview-containers。

我需要先显示前 9 个 .preview-containers，然后在每个 #show-more 按钮上单击显示另外 9 个，直到它们全部显示。

我还需要更新按钮中的值以反映仍有多少.preview-containers 被隐藏。

   var allContainers = $('.preview-container').hide();
    $('#show-more').html('Show more works ('+allContainers.length+')');
    allContainers.slice(0,9).show();

$('#show-more').on('click', function(){
    $('#show-more').html('Show more works ('+allContainers.length+')');
    allContainers.slice(9,18).fadeIn();
});

到目前为止，代码在页面加载时成功隐藏了所有 24 个，我如何更新此代码以显示前 9 个，然后在每次按下 #show-more 按钮时显示额外的 9？

Answer 1

我会这样做：

var allContainers = $('.preview-container:gt(8)').hide();
$('#show-more').html('Show more works (' + allContainers.length + ')').on('click', function() {
  $('.preview-container:hidden:lt(9)').fadeIn();
  $('#show-more').html('Show more works (' + $('.preview-container:hidden').length + ')');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="show-more">
  button
</button>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>
<div class="preview-container">
  div
</div>

Answer 2

你可以这样做，迈出一步，increment 上every click 并显示.prev-container:
检查下面的sn-p

 var step=9;
var allContainers = $('.preview-container').hide();
$('#show-more').on('click', function(){
 var showMore= allContainers.length-step;
  if(showMore<0){
    showMore=0;
  }
    $('#show-more').html('Show more works ('+showMore+')');
    allContainers.slice(0,step).fadeIn();
  step+=9;
});

var step = 9;
var allContainers = $('.preview-container').hide();
$('#show-more').on('click', function() {
  var showMore = allContainers.length - step;
  if (showMore < 0) {
    showMore = 0;
  }
  $('#show-more').html('Show more works (' + showMore + ')');
  allContainers.slice(0, step).fadeIn();
  step += 9;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show-more">Show more</button>

<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>
<li class="preview-container">Some Text</li>