Ссылка Jquery для отображения divs в последовательности по одному за раз?

Question

У меня есть страница с 5 div. Показывается только один из них - остальные 4 скрыты css. У меня есть кнопка, которую я бы хотел, чтобы щелкнуть и показать дополнительный div по одному за раз в последовательности. Таким образом, другими словами ... 1-й щелчок ссылки показывает div # 2, второй щелчок добавляет div # 3, третий клик будет показывать div # 4, и тогда последний щелчок будет иметь все 5 разделов.

У меня все в порядке с изображением/скрыть аспект, но как я могу получить ссылку для перехода, чтобы показать следующий div в последовательности?

Answer 1

Простой способ осуществить это будет нумеровать дивы путем присвоения идентификаторов как див1, div2, div3 ...

Тогда это просто вопрос отслеживания подсчета видимых дивы. В обработчике событий нажатия кнопки вы увеличиваете счетчик и генерируете идентификатор следующего div для отображения.

Также добавьте проверку, чтобы увидеть, будет ли количество видимых divs равным итоговым divs для отображения.

var visibleDivsCount = 1; 
var totalDivsCount = 5 


function DisplayNextDiv() 
{   
    if(visibleDivsCount < totalDivsCount) 
    { 
     visibleDivsCount += 1; 
     $("#div"+visibleDivsCount).show(); 
    } 
} 


$("#button").click(function(){ 
    DisplayNextDiv(); 
}); 

Answer 2

Вы всегда можете получить доступ к дисплею каждого DIV, чтобы получить значение display собственности, так как, насколько я знаю, функция JQuery hide() просто устанавливает дисплей на none, во всяком случае.

Вы могли бы написать функцию, которая проверяет эти значения - как еще один плакат предположил, что это может быть идея назвать своим div «S с помощью последовательных идентификаторов, как:

<div id="div-0"></div> 
<div id="div-1"></div> 

И так далее ... потом построить свой JQuery селекторы в цикле и проверьте свойство дисплея:

for (divNo = 0; divNo < numberOfDivs; divNo++) { 
    if ($("#div-" + divNo.toString()).css("display") == none) { 
     // Show this div and bail. 
     // ... 
    } 
}