Отображение нескольких разделов по одному (например, колода карт)

Question

Я делаю анкету для опроса. Он должен отображать один вопрос за раз.

В каждом вопросе есть несколько переключателей. При нажатии на один из переключателей вопрос будет удален (отображение: нет, возможно, с помощью скользящей анимации), а следующий появится.

Вот упрощенная версия формы и структуры, которые мы имеем до сих пор. Раньше я не делал так много программирования переднего плана, поэтому я не знаю, есть ли простой стандартный способ сделать это с помощью Javascript или jQuery?

Был бы очень признателен за некоторые указатели в правильном направлении. Вот концепция:

1. Дисплей ДИВ с вопросом # 1
2. Нажмите радиокнопку
3. Скрыть DIV с вопросом # 1
4. Дисплей ДИВ с вопросом # 2
5. Нажмите радиокнопку

6. Скрыть div с вопросом № 2 и т. Д.

   <form method="post"> 
   
       <div id="question_1"> 
        <div class="question"> 
        Question 1 
        </div> 
        <div class="table"> 
         <input type="radio" value="1" name="rb_1"> 
         <input type="radio" value="2" name="rb_1"> 
        </div> 
       </div> 
   
       <div id="question_2"> 
        <div class="question"> 
        Question 2 
        </div> 
        <div class="table"> 
         <input type="radio" value="1" name="rb_2"> 
         <input type="radio" value="2" name="rb_2"> 
        </div> 
       </div> 
   
       <div id="question_3"> 
        <div class="question"> 
        Question 3 
        </div> 
        <div class="table"> 
         <input type="radio" value="1" name="rb_3"> 
         <input type="radio" value="2" name="rb_3"> 
        </div> 
       </div> 
   
       <div id="question_4"> 
        <input type="submit" name="submit"> 
       </div> 
   
   </form> 
   

Answer 1

Это не будет очень удобным для пользователя, как это делает, но то, что вы просили, и дает представление о подходе

Сделано регулировки для перемещения class="question" на внешних уровнях, где идентификаторы являются. Настройка общих классов поведенческих элементов, как правило, проще, чем нацеливание удостоверения личности

<div id="question_1" class="question"> 

JS

$(function(){  
    $('.question :radio').change(function(){ 
     $(this).closest('.question').hide().next().show(); 
    });  
}); 

Есть много form wizard или form steps типа плагинов, которые вы могли бы использовать для этого, которые предлагают больше анимации, предыдущая/следующая кнопки и визуальные индикаторы и т.д. шаг

DEMO

Answer 2

Сделать по умолчанию для всех скрытых div. Когда щелкает переключатель в div, отобразите следующий div и скройте его. Поэтому в jQuery используйте элементы get в div и установите для свойства display значение none. Храните каждый div в массив div. У вас есть функция, которая активируется при нажатии переключателя. Когда он щелкнут, перейдите к следующему div в массиве из переключателя div и установите его блокировку.