javascript - 单击按钮时显示以下 2 个元素

Question

我有一个 ul li 列表。

在页面加载时，我想隐藏具有 hide 类的所有元素，在添加更多按钮时，我想显示接下来的 2 个元素，依此类推。

$(function() {
  $('.hide').hide();

  $('#add_more').on('click', function() {
    // show
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button id="add_more">Add next 2</button>
<ul>
  <li class="show">1</li>
  <li class="show">2</li>
  <li class="hide">3</li>
  <li class="hide">4</li>
  <li class="hide">5</li>
  <li class="hide">6</li>
  <!-- Other elements -->
  <li class="hide">n</li>
</ul>

Answer 1

要实现此目的，您可以检索当前最后显示的元素，然后使用 slice() 获取以下两个元素并显示它们。试试这个:

$(function() {
  $('#add_more').on('click', function() {
    $('.show:last').nextAll().slice(0, 2).toggleClass('show hide');
  })
})

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button id="add_more">Add next 2</button>
<ul>
  <li class="show">1</li>
  <li class="show">2</li>
  <li class="hide">3</li>
  <li class="hide">4</li>
  <li class="hide">5</li>
  <li class="hide">6</li>
  <!-- Other elements -->
  <li class="hide">n</li>
</ul>