Показать/скрыть divs, «один за другим» и «все сразу»

Я использую это, чтобы показать/скрыть некоторые divs, в конце у меня есть кнопка, чтобы показывать divs один за другим.Показать/скрыть divs, «один за другим» и «все сразу»

Как у меня есть вторая кнопка, чтобы показать/скрыть все из них сразу, не слишком много перепутав с HTML?

В основном каждый div содержит поле ввода, поэтому пользователь нажимает кнопку «Добавить еще одну», чтобы получить дополнительное поле. По умолчанию все поля скрыты, поэтому мне нужна кнопка, чтобы показать их все сразу (у меня 14 divs для отображения/скрытия).

Любая помощь будет оценена по достоинству.

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

Weird; Я мог бы поклясться, что опубликовал рабочую версию. Извини за это! Обновлен * действительно работающим * кодом и демо. =/ –

Извините, но ваш «Добавить еще один!» просто показывает один, и если вы нажмете еще раз, он скроет предыдущее и покажет следующий, я пытаюсь «Добавить еще один!». - это означает, что если я нажму кнопку, я покажу следующий div, но сохранив предыдущий (он останется видимым). Ваша последняя демонстрация работает отлично, но не так, как ожидалось. – user983248

есть кнопка с функцией, которая выбирает все дивы классом (что вам придется добавить) и кожсырья/показывает их. Если вам просто нужна одна кнопка, вам нужно будет запомнить свое состояние, которое в приведенном ниже примере я делаю с глобальным.

<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

отредактировал мой ответ с некоторым кодом. – Colleen

и обновил код, чтобы быть семантически правильным :) – Colleen

-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

Показать/скрыть divs, «один за другим» и «все сразу»

ответ

Смежные вопросы