javascript - 显示/隐藏 div， "one by one"和 "all at once"

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