javascript - 单击按钮时显示更多元素？

Question

我试图在我的页面上显示 5 个元素，然后有一个函数可以加载/显示另外 5 个元素，这个过程可以继续，直到没有更多的隐藏元素为止。

我创建了一个 fiddle 来向您展示我到目前为止所做的事情:https://jsfiddle.net/89v781rL/2/

目前，当点击按钮时，所有隐藏元素同时显示，这不是我想要的。我需要向当时显示的元素再添加 5 个元素..

我尝试过类似的方法，但它不起作用:

$('#grid li').not(':visible').each( function() {    
  $("#grid").children(":gt(4)").hide();
});

这是我的完整工作代码:

$("#grid").children(":gt(4)").hide();

$('#sales').click(function() {
    $('#grid li').not(':visible').each( function() {
      $(this).slideDown();
    });
});

Answer 1

您可以通过使用 slice() 获取接下来的 5 个隐藏元素并对它们调用 slideDown() 来实现您的需要。另请注意，您可以使用 CSS 的 :nth-child 来隐藏元素而不是 JS，从而避免在加载时出现 FOUC。试试这个:

$('#sales').click(function() {
  $('#grid li:hidden').slice(0, 5).slideDown();
});

#grid li:nth-child(n+6) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="grid effect-2 cols" id="grid">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li><a href="#">16</a></li>
  <li><a href="#">17</a></li>
</ul>

<button id="sales">
  Show more
</button>