javascript - 单击时一一显示 div 的子级

Question

我有以下 HTML 设置

<button>Start</button>
<div id="container">
  <div>
    <h2>First Div</h2>
    <button>Test</button>
  </div>
  <div>
    <h2>Second Div</h2>
    <button>Test</button>
  </div>
  <div>
    <h2>Third Div</h2>
  </div>
</div>

我希望能够按下开始按钮并一一显示具有容器ID的div的子div。因此第一个 div 会在第一次点击时显示出来，依此类推。

这是我到目前为止所拥有的 javascript

$(document).ready(function() {
  $("div").addClass("hidden");

});
var count = $("#container > div").length;
$(":button").click(function() {
  if (count > 0) {

    count--;
  }
});

有什么聪明的想法吗？

这是一个 fiddle https://jsfiddle.net/afwonjr5/18/

我只想按开始按钮 3 次以显示容器 div 内的 3 个 div。

Answer 1

由于您使用的是 Jquery，因此您可以像这样简单地尝试一下。

$("#container div").addClass("hidden");

var count = 0;
$("#start").click(function() {
  count++;
  $("#container div:nth-child("+count+")").toggle();
});

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="start">Start</button>
<div id="container">
  <div>
    <h2>First Div</h2>
    <button>Test</button>
  </div>
  <div>
    <h2>Second Div</h2>
    <button>Test</button>
  </div>
  <div>
    <h2>Third Div</h2>
  </div>
</div>