javascript - 在 jQuery 点击功能上显示特定数量的

Question

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

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

我还需要更新按钮中的值以反射(reflect)仍有多少 .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>