顯示/隱藏div，「一個接一個」和「一次全部」

Question

我用這個來顯示/隱藏一些div，最後我有一個按鈕來顯示div。

我怎樣纔能有第二個按鈕來顯示/隱藏他們所有的一次不用太多的HTML？

基本上每個div都包含一個輸入字段，所以用戶點擊「添加一個」按鈕來獲得額外的字段。默認情況下，所有字段都是隱藏的，所以我需要一個按鈕來一次顯示它們（我有14個div來顯示/隱藏）。

任何幫助將不勝感激。

的Javascript

var counter = 0; 
var numBoxes = 3; 
function toggle4(showHideDiv) { 
     var ele = document.getElementById(showHideDiv + counter); 
     if(ele.style.display == "block") { 
       ele.style.display = "none"; 
     } 
     else { 
       ele.style.display = "block"; 
     } 
     if(counter == numBoxes) { 
       document.getElementById("toggleButton").style.display = "none"; 
     } 
} 

HTML

<table> 
    <tr> 
     <td style="width: 150px;"> 
     <div id="box1" style="display: none;">First</div> 
     </td> 
     <td style="width: 150px;"> 
     <div id="box2" style="display: none;">Second</div 
     </td> 
     <td style="width: 150px;"> 
     <div id="box3" style="display: none;">Third</div 
     </td> 
    </tr> 
</table> 
<input id="toggleButton" type="button" value="Add one more!" onclick="counter++; toggle4('box');"> 

Answer 1

這裏的基本功能，但它需要一些細化：

var d = document, 
    table = d.getElementsByTagName('table')[0], 
    divs = table.getElementsByTagName('div'), 
    toggle = d.getElementById('toggleButton'), 
    allToggle = d.getElementById('allToggle'), 
    count = 0; 

function toggles(){  
    var elem = divs[count]; 
    elem.style.display = 'block'; 

    count++; 
} 

toggle.onclick = function(){ 
    toggles(); 
}; 

allToggle.onclick = function(){ 
    if (allToggle.getAttribute('data-show') == 1){ 
     for(var i=0,len=divs.length;i<len;i++){ 
      divs[i].style.display = 'none'; 
      allToggle.setAttribute('data-show',0); 
      allToggle.value = 'Show all'; 
     } 
    } 
    else { 
     for(var i=0,len=divs.length;i<len;i++){ 
      divs[i].style.display = 'block'; 
      allToggle.setAttribute('data-show',1); 
      allToggle.value = 'Hide all'; 
     } 
    } 
} 
​ 

JS Fiddle demo。

以上基於以下HTML：

<table> 
    <tr> 
     <td style="width: 150px;"> 
     <div id="box1" style="display: none;">First</div> 
     </td> 
     <td style="width: 150px;"> 
     <div id="box2" style="display: none;">Second</div> 
     </td> 
     <td style="width: 150px;"> 
     <div id="box3" style="display: none;">Third</div> 
     </td> 
    </tr> 
</table> 
<input id="toggleButton" type="button" value="Add one more!" /> 
<input id="allToggle" type="button" value="Show all" />​ 

Answer 2

有由一類選擇所有的div（即你必須添加）功能，並隱藏了一個按鈕/顯示他們。如果你只想要一個按鈕，你必須記住你的狀態，在下面的例子中我使用全局狀態。

<button id="showhideall"> 

$(document).ready(function(){ 

var allshowing = true; 

$("#showhideall").click(function(){ 
    alert(allshowing); 
    if(allshowing){ 
     $(".foo").hide(); 
     allshowing=false;    
    } else { 
     $(".foo").show(); 
    } 
}); 
}​);​ 

Answer 3

var counter = 0; 
var numBoxes = 3; 
function toggle4(showHideDiv) { 
     var ele = document.getElementById(showHideDiv + counter); 
     if(ele.style.display == "block") { 
       ele.style.display = "none"; 
     } 
     else { 
       ele.style.display = "block"; 
     } 
     if(counter == numBoxes) { 
       document.getElementById("toggleButton").style.display = "none"; 
     } 
} 

function toggle3(contentDiv) { 
     if (contentDiv.constructor == Array) { 
       for(i=0; i < contentDiv.length; i++) { 
        toggle2(contentDiv[i]); 
       } 
     } 
     else { 
       toggle2(contentDiv); 
     } 
} 

function toggle2(showHideDiv) { 
    var ele = document.getElementById(showHideDiv); 

    if(ele.style.display == "block") { 
      ele.style.display = "none"; 

     } 
    else { 
     ele.style.display = "block"; 

    } 
} 

<input id="toggleButton" type="button" value="Show me the money!" onclick="counter++; toggle4('box');"> 

<input type="button" value="Press me to toggle all 3 DIVs" onClick="toggle3(['box1', 'box2', 'box3']);">