Jquery 多步骤分区&；字段集

我正在创建一个具有以下结构的多步骤表单

<section>
    <fieldset>
        <label>Q1</label>
        <input type="radio" name="name" value="1">
        <button type="button" class="next btn btn-primary btn-block">Next</button>
    </fieldset>
    <fieldset>
        <label>Q2</label>
        <input type="radio" name="name" value="2">
        <button type="button" class="next btn btn-primary btn-block">Next</button>
    </fieldset>
    <fieldset>
        <label>Q3</label>
        <input type="radio" name="name" value="3">
        <button type="button" class="next btn btn-primary btn-block">Next</button>
    </fieldset>
</section>

---

查看此更新的小提琴。这将隐藏除第一个字段集之外的所有其他字段集。 当用户单击“下一步”时，隐藏当前

字段集

，然后显示下一个字段集

var len=$（“section:first”）.children（）.length；
var i=0；
var s=0；
$（“.next”）。单击（函数（）{
i++；
如果（len==i）{
var p=$（this.parent（）.parent（'section'）.next（）；
p、 show（）；
p、 children（）.first（）.show（）；
len=0；
i=0；
len=p.children（）.长度；
警报（len）；
$（this.parent（）.parent（）.hide（）；
}
否则{
$（this.parent（）.next（）.show（）；
$（this.parent（）.hide（）；
}
});
$（文档）.ready（函数（）{
$（“节”）.hide（）；
$（“第一节”）.show（）；
$（“字段集”）.hide（）；
$（“字段集：第一个”）.show（）；
});
#表单部分：非（：类型的第一个）{
显示：无；
}
#表单字段集：非（：类型的第一个）{
显示：无；
}
.隐藏{
显示：无；
}

Q1
下一个
问题2
下一个
第三季度
下一个
问题12
下一个
问题2
下一个
第三季度
下一个
问题12
下一个
问题2
下一个
Q
下一个
问题42
下一个
问题22
下一个
第三季度
下一个
我试图用正确的工作和优化的逻辑给你一个答案


$（文档）.ready（函数（）{
var指数，nextIndex，totalSteps=$（“.step”）.length；
$（“.step”）.eq（0）.children（“.rdoStep”）.prop（“选中”，true）；
$（“.next”）。在（“单击”，函数（）{
index=$（this.parents（“fieldset”）.index（）；
如果（索引
*{
字体系列：“arial”；
字体大小：12px；
}
.步骤{
显示：无；
}
.步骤：第n个子项（1）{
显示：块；
}

Q1
下一个
问题2
下一个
第三季度
下一个
您的代码一次显示所有字段集，当我单击“下一步”时，它只是隐藏了特定的字段集。所以我无法理解你在尝试什么？：-不是所有的都在展示，一次一个字段集。@Zack请查看我的答案，如果问题仍然存在，请让我知道。我的小提琴和你的一样工作，但我要做的是转到下一部分@Zack我已更新小提琴签出我添加了两个部分以显示其移动到下一部分警报显示否：offieldset@Zack那是因为我没有设置
i=o
现在更新了一个
var current = 1,current_step,next_step,steps;
  steps = $("fieldset").length;
    $(".next").click(function(){
        current_step = $(this).parent();
        next_step = $(this).parent().next();
        next_step.show();
        current_step.hide();
        setProgressBar(++current);
      });
      setProgressBar(current);

      // Change progress bar action
      function setProgressBar(curStep){
        var percent = parseFloat(100 / steps) * curStep;
        percent = percent.toFixed();
        $(".progress-bar")
          .css("width",percent+"%")
          .html(percent+"%");   
      }

#form section:not(:first-of-type) {
    display: none;
  }
        #form fieldset:not(:first-of-type) {
    display: none;
  }