Показать следующий div один за раз, используя одну кнопку - jQuery

Question

Очень новый для jQuery, пожалуйста, несите меня. У меня есть форма с повторяющимися полями, которые я хочу показывать по одному при нажатии пользователем кнопки . Вот основная схема:

<form> 
    <fieldset> 
     <input 1> 
     <input 2> 
     <div id="address-container"> 
      <fieldset> <!-- current address --> 
       <input 3> 
       <input 4> 
      </fieldset> 
      <div id ="previous-address-1" class="hidden"> 
      <fieldset> 
       <input 5> 
       <input 6>   
      </fieldset> 
      </div> 
      <div id ="previous-address-2" class="hidden"> 
      <fieldset> 
       <input 5> 
       <input 6>   
      </fieldset> 
      </div> 
      <div id ="previous-address-3" class="hidden"> 
      <fieldset> 
       <input 5> 
       <input 6>   
      </fieldset> 
      </div> 
     </div> <!-- close address-container --> 
    <span class="button"><a href="#" id="show-hidden">Add a Previous Address</a></span> 
    </fieldset> 
</form> 

я могу получить все .hidden-ДИВ, чтобы показать сразу после щелчка, но я пытаюсь выполнить показывать их по одному за раз, с пользователем, нажав еще раз, чтобы добавить еще вложенный набор полей в случае необходимости. Я понимаю, что я мог добавить больше кнопок и прикрепить к каждому id, а затем скрыть их, как только они будут нажаты, но кажется, что должен быть менее подробный способ использования next() и/или eq().

С другой стороны, возможно, добавление будет лучшим маршрутом?

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

Answer 1

Да, вы правы. Вы можете использовать eq в вашем селекторе.

$('#show-hidden').click(function(event){ 
    event.preventDefault(); 

    $('#address-container .hidden:eq(0)').removeClass('hidden'); 
}); 

Пример: http://jsbin.com/aMuHAhe/1/edit

Update: Скрыть ссылку после того, как все показаны

$('#show-hidden').click(function(event){ 
    event.preventDefault(); 

    $('#address-container .hidden:eq(0)').removeClass('hidden'); 

    if($('#address-container .hidden').length == 0){ 
     $(this).hide(); 
    } 
}); 

Это проверяет, есть ли какие-либо элементы внутри # адресном-контейнера, которые имеют скрытый класс , Если ничего не найдено, .length будет 0. $ (this) является # show-hidden ссылкой.

Answer 2

Попробуйте это,

$('.button').on('click',function(){ 
    var elem= $('.hidden:first'); 
    if($('.show').length) 
    { 
     elem=$('.show').next('div.hidden'); 
     $('.show').removeClass('show'); 
    } 
    elem.addClass('show'); 
    return false;// to prevent for submit 
}); 

Demo

Answer 3

$(function(){ 
var i = 0; 
$("#show-hidden").click(function(ev){ 
ev.preventDefault(); 

var j = (i%3)+ 1; 


$("#previous-address-"+j).removeClass('hidden'); 

$("#address-container").find("div").not(document.getElementById("previous-address-"+j)).addClass('hidden'); 

i++; 
}); 


}); 

Здесь я объявила глобальную переменную i=0. Каждый раз, когда на ссылку нажимается значение j циклов между 1 2 и 3, как 1,2,3,1,2,3 ..... И содержимое div с id, вычисленным из j, показано, пока другие скрыты.

Demo