JavaScript：在單個按鈕上顯示多個Div。單擊

Question

我需要在用戶單擊按鈕時一次顯示一系列<div>元素。 他們使用<div style="display:none">開始隱藏。 總共有11個<div>標簽，每個標簽都有不同的“id”，從id="dt-1"到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> ，而不是一次顯示一個。 每次單擊只應添加一個<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">