Question

我有以下HTML设置

move(...)

我希望能够按下开始按钮并逐个显示div的子div与容器的id。所以第一个div会在第一次点击时显示出来，依此类推。

这是我到目前为止的javascript

<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>

任何聪明的想法？

这是一个小提琴 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>

Answer 2

您可以运行以下代码段：

＆＃13;

document.querySelectorAll('#container > div').forEach(function(el) {
  el.classList.add("hidden");
});
var startButton = document.getElementById("hey")
startButton.onclick = function(e) {
  var arrDiv = Array.from(document.getElementById("container").getElementsByTagName("div"));
  var firstDivHidden = arrDiv.filter(function(div) {
    return div.classList.contains("hidden");
  })[0];
  if (firstDivHidden)
  	firstDivHidden.classList.remove("hidden");
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<button id="hey">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>

＆＃13;

希望它有所帮助，

致以最诚挚的问候，

点击一个接一个地显示div的孩子

2 个答案: