javascript - 一次显示多个 div(如一副纸牌)

Question

我正在制作一份调查表。它应该一次显示一个问题。

每个问题都有多个单选按钮。单击一个单选按钮时，问题将被删除(显示:无；可能带有滑动动画)，下一个将出现。

这是我们目前拥有的表单和结构的简化版本。我之前没有做过那么多的前端编程 - 所以我不知道是否有一种简单的标准方法可以使用 Javascript 或 jQuery 来完成这项工作？

非常感谢一些正确方向的指示。这是概念:

1. 显示带有问题 #1 的 div
2. 点击单选按钮
3. 用问题 #1 隐藏 div
4. 显示带有问题 #2 的 div
5. 点击单选按钮

6. 用问题 #2 隐藏 div等等……

   <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" 移动到 ID 所在的外部级别。在行为元素上设置通用类通常比定位 ID 更简单

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

JS

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

有很多form wizard 或form steps 类型的插件可以用于此目的，它们提供更多动画、上一个/下一个按钮和可视化步骤指示器等

DEMO