在jQuery click函数上显示<div>的特定数量

debugcn 发表于 Dev

用户名

在每个页面上，都有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个代码？

j08691

我会这样：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。