在按鈕點擊時顯示div但動態地

Question

我需要在用戶單擊按鈕時一次顯示一系列<div>元素。他們從<div style="display:none">開始隱藏。有一個總的每與id="dt-1"不同的「身份證」 11個<div>標籤id="dt-11"

這是我現在有代碼：

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> s， 。每次點擊只能添加一個<div>，而不是全部。

1. 首先點擊 - 顯示<div id='dt-2'>
2. 第二次點擊 - 顯示<div id='dt-3'>
3. ...等等。

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