Question

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

<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>

部分数量取决于我从GET获得的值。问题是我想逐个显示一个字段集，一旦完成所有字段集，然后移到第2节，依此类推。下面的jQuery逐个使用一个字段集而不是一个部分。

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;
  }

Fiddle

Answer 1

看看这个更新的小提琴。除了第一个之外，它会隐藏所有其他fieldset。当用户点击下一个隐藏当前fieldset然后显示下一个

时

＆＃13;

var len=$("section:first").children().length;
var i=0;
var s=0;
$(".next").click(function(){
i++;
if(len==i){
var p=$(this).parent().parent('section').next();
p.show();
p.children().first().show();
len=0;
i=0;
len=p.children().length;
alert(len);
$(this).parent().parent().hide();

}
else{
$(this).parent().next().show();
$(this).parent().hide();
}
});
$(document).ready(function(){
$("section").hide();
$("section:first").show();
$("fieldset").hide();
$("fieldset:first").show();
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<section>
  <fieldset>
    <label>Q12</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>
<section>
  <fieldset>
    <label>Q12</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>Q</label>
    <input type="radio" name="name" value="3">
    <button type="button" class="next btn btn-primary btn-block">Next</button>
  </fieldset>
</section><section>
  <fieldset>
    <label>Q42</label>
    <input type="radio" name="name" value="1">
    <button type="button" class="next btn btn-primary btn-block">Next</button>
  </fieldset>
  <fieldset>
    <label>Q22</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>

＆＃13;

以及指向小提琴的链接：https://jsfiddle.net/t3gcd3dq/9/

Answer 2

我试图通过正确的工作和优化逻辑给你答案。

$(document).ready(function() {

  var index, nextIndex, totalSteps = $(".step").length;
  $(".step").eq(0).children(".rdoStep").prop("checked", true);
  $(".next").on("click", function() {
    index = $(this).parents("fieldset").index();
    if (index < totalSteps) {
      $(".rdoStep").prop("checked", false);

      nextIndex = index + 1;
      if (nextIndex === totalSteps) {
        nextIndex -= 1;
      }

      $(".step")
        .eq(index)
        .children("button")
        .prop("disabled", true);

      $(".step")
        .eq(nextIndex)
        .show()
        .children(".rdoStep")
        .prop("checked", true);

    }
  });
});

*{
  font-family:"arial";
  font-size:12px;
}

.step {
  display: none;
}

.step:nth-child(1) {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <fieldset class="step">
    <label>Q1</label>
    <input type="radio" name="name" class="rdoStep" value="1">
    <button type="button" class="next btn btn-primary btn-block">Next</button>
  </fieldset>
  <fieldset class="step">
    <label>Q2</label>
    <input type="radio" name="name" class="rdoStep" value="2">
    <button type="button" class="next btn btn-primary btn-block">Next</button>
  </fieldset>
  <fieldset class="step">
    <label>Q3</label>
    <input type="radio" name="name" class="rdoStep" value="3">
    <button type="button" class="next btn btn-primary btn-block">Next</button>
  </fieldset>
</section>

Multistep div section＆amp;字段集

2 个答案: