显示/隐藏div，“一个接一个”和“一次全部”

我用这个来显示/隐藏一些div，最后我有一个按钮来显示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');">

来源

2012-04-18 user983248

这里的基本功能，但它需要一些细化：

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

来源

2012-04-18 23:53:39

您的“添加一个！”按钮只显示一个div并停止 – user983248 2012-04-18 23:59:13

奇怪;我可以发誓我发布了一个工作版本。对于那个很抱歉！更新*真正的工作*代码和演示。 =/ – 2012-04-19 00:11:43

对不起，但你的“再加一个！”只是显示一个，如果再次点击它将隐藏前一个并显示下一个，我试图“再添加一个！” - 这意味着如果我点击按钮，我会显示下一个div，但保留前一个（它将保持可见）。你的最新演示完美，但并不像预期的那样。 – user983248 2012-04-19 00:16:32

有由一类选择所有的div（即你必须添加）功能，并隐藏了一个按钮/显示他们。如果你只想要一个按钮，你必须记住你的状态，在下面的例子中我使用全局状态。

<button id="showhideall"> 

$(document).ready(function(){ 

var allshowing = true; 

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

来源

2012-04-18 23:40:27 Colleen

Yhea！这听起来像解决方案，但你能给我一个例子吗？ – user983248 2012-04-18 23:44:36

用一些代码编辑我的答案。 – Colleen 2012-04-18 23:45:35

并更新了代码的语义正确性:) – Colleen 2012-04-18 23:53:17

-1

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']);">

来源

2012-04-19 09:57:12 user983248

显示/隐藏div，“一个接一个”和“一次全部”

回答

相关问题