Question

我正在处理一个必须适合一页的长形式。该部分应在完成后消失，并显示下一部分。我想知道如何动态地这样做，所以我可以多次重复使用它。我还需要创建一些面包屑，以便在需要时可以更改前面的部分。

一旦用户点击单选按钮，我希望表单转到下一部分。

$('.section:not(.active)').hide(0);

.active {
}

.breadcrumbs>ul>li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="breadcrumbs">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

<form role="form">
  <div class="section active">
    <img src="http://placehold.it/350x150"/><br/>
    <input type="text" id="name" name="name" placeholder="Enter Name"><br/>
    <input type="radio" name="sex" value="male">Male<br/>
    <input type="radio" name="sex" value="female">Female
  </div>
  <div class="section">
    <img src="http://placehold.it/200x100"/><br/>
    <input type="text" id="hobby" name="hobby" placeholder="Enter Hobby"><br/>
    <input type="radio" name="fun" value="yes">Yes<br/>
    <input type="radio" name="fun" value="no">No
  </div>
  <div class="section">
    <img src="http://placehold.it/200x100"/><br/>
    <input type="text" id="wine" name="wine" placeholder="Favorite Wine"><br/>
    <input type="radio" name="wine-type" value="red">Red<br/>
    <input type="radio" name="wine-type" value="white">White
  </div>
</form>

Answer 1

这会处理面包屑要求：

$('.breadcrumbs li').click(function() {
  $('.section').removeClass('active');

  $('.section').eq($(this).index())
    .addClass('active');
});

这将导致下一部分出现在单选按钮上：

$('input[type=radio]').click(function() {
  $(this).parent()
    .removeClass('active')
    .next()
    .addClass('active');
});

＆＃13;

$('.breadcrumbs li').click(function() {
  $('.section').removeClass('active');
  
  $('.section').eq($(this).index())
    .addClass('active');
});

$('input[type=radio]').click(function() {
  $(this).parent()
    .removeClass('active')
    .next()
    .addClass('active');
});

＆＃13;

div.active {
  display: block;
}

.section {
  display: none;
}

.breadcrumbs>ul>li {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="breadcrumbs">
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</div>

<form role="form">
  <div class="section active">
    <img src="http://placehold.it/350x150"/><br/>
    <input type="text" id="name" name="name" placeholder="Enter Name"><br/>
    <input type="radio" name="sex" value="male">Male<br/>
    <input type="radio" name="sex" value="female">Female
  </div>
  <div class="section">
    <img src="http://placehold.it/200x100"/><br/>
    <input type="text" id="hobby" name="hobby" placeholder="Enter Hobby"><br/>
    <input type="radio" name="fun" value="yes">Yes<br/>
    <input type="radio" name="fun" value="no">No
  </div>
  <div class="section">
    <img src="http://placehold.it/200x100"/><br/>
    <input type="text" id="wine" name="wine" placeholder="Favorite Wine"><br/>
    <input type="radio" name="wine-type" value="red">Red<br/>
    <input type="radio" name="wine-type" value="white">White
  </div>
</form>

＆＃13;

Answer 2

每当选择单选按钮时，您想要移动到下一部分，是吗？然后，这可能会有所帮助：

$('input:radio').change(function(){
    var currdiv = $(this).parent();
    currdiv.fadeOut(500);
    currdiv.next().fadeIn(500);
});

这是一个jsfiddle，你可以检查它是如何工作的：https://jsfiddle.net/f9tnsq1x/1/

使用jQuery隐藏和显示部分的多节表单

2 个答案: