JavaScript:在单击一次按钮时显示多个Div

Question

我需要在用户单击按钮时一次一个地显示一系列<div>元素。它们是使用<div style="display:none">隐藏起来的。总共有11个<div>标签，每个标签从id="dt-1"到id="dt-11"都有不同的"id“

下面是我现在拥有的代码：

​

function adddt() {
    var count;
    for(count=1;count<6;count++)
    {
        document.getElementById('dt-'+count+'').style.display = 'block';
    }
};

<div id='dt-1'>
<label>Destination 1</label>
<input type="text">
<input type="number">
</div>

<div id='dt-2' style="display:none;">
<label>Destination 2</label>
<input type="text">
<input type="number">
</div>

<div id='dt-3' style="display:none;">
<label>Destination 3</label>
<input type="text">
<input type="number">
</div>

<div id='dt-4' style="display:none;">
<label>Destination 4</label>
<input type="text">
<input type="number">
</div>

<div id='dt-5' style="display:none;">
<label>Destination 5</label>
<input type="text">
<input type="number">
</div>

<input type="button" onclick="adddt()" value="add more destinations">

​

正如您所看到的，当您单击按钮时，它会显示所有的<div>，而不是一次显示一个。每次点击应该只添加一个<div>，而不是所有的all。

第一次单击-显示<div id='dt-2'>

• Second单击-显示<div id='dt-3'>

• ...

1. 以此类推。

Answer 1

您可以尝试这样做，使用一个存储当前id的变量，每次递增1：

​

var count = 2;
var countMax = 5;

function adddt() {
  if(count > countMax)
    return;
  document.getElementById('dt-' + count + '').style.display = 'block';
  count++;
}

<div id='dt-1'>
  <label>Destination 1</label>
  <input type="text">
  <input type="number">
</div>

<div id='dt-2' style="display:none;">
  <label>Destination 2</label>
  <input type="text">
  <input type="number">
</div>

<div id='dt-3' style="display:none;">
  <label>Destination 3</label>
  <input type="text">
  <input type="number">
</div>

<div id='dt-4' style="display:none;">
  <label>Destination 4</label>
  <input type="text">
  <input type="number">
</div>

<div id='dt-5' style="display:none;">
  <label>Destination 5</label>
  <input type="text">
  <input type="number">
</div>

<input type="button" onclick="adddt()" value="add more destinations">

​