显示/隐藏 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']);">