单击后淡入接下来的两个元素

Question

我尝试再显示两个 div，每次都单击一个按钮。我有两个问题。

1. 点击时只显示一个（应该显示两个）
2. 第一次点击后不再重复

我已经尝试过循环或重复，但没有任何效果。哪里错了？

$(".button").click(function() {
  $(".content").nextAll(':lt(2)').fadeIn("slow");
});

.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content hide">Content 3</div>
<div class="content hide">Content 4</div>
<div class="content hide">Content 5</div>
<div class="content hide">Content 6</div>
<div class="content hide">Content 7</div>
<div class="content hide">Content 8</div>
<div class="content hide">Content 9</div>
<div class="content hide">Content 10</div>
<div class="button">SHOW ME 2 MORE</div>

这是我的小提琴：https://jsfiddle.net/x25Ldwaj/1/

Answer 1

你的逻辑差不多了，只是选择器不对。你需要从最后一个可见的

.content

元素开始，所以你可以使用

:visible:last

，像这样：

$(".button").click(function() {
  $(".content:visible:last").nextAll('.content:lt(2)').fadeIn("slow");
  $(this).toggle($(".content:visible:last").index() != $('.content').length);
});

.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content hide">Content 3</div>
<div class="content hide">Content 4</div>
<div class="content hide">Content 5</div>
<div class="content hide">Content 6</div>
<div class="content hide">Content 7</div>
<div class="content hide">Content 8</div>
<div class="content hide">Content 9</div>
<div class="content hide">Content 10</div>
<div class="button">SHOW ME 2 MORE</div>