我在这里对您的标记采取了一些自由,并通过一些假设猜测了您的意图。
跳到这个小提琴看看它是如何工作的:http: //jsfiddle.net/rRmRY/
- 使您的
step1-X
元素成为过程中的步骤。
- 为步骤中的每个选择假设某种形式 - 我以学校为例
- 给表格一些内在的智慧
- 使按钮不是提交按钮
- 通过使它们成为标签而不仅仅是每个标签的文本,使单选标签可点击
- 在下一个表格(学校表格)上放一个“上一个”按钮
只需选择“学校”单选按钮,然后单击“下一步”按钮即可在下一步中查看空的学校表格。我让你把你想要的东西放在那里并添加更多的表格等。如果你复制以前的表格作为开始,代码应该是通用的。
修订后的标记:(不完整,请您完成)
<div id="step0" class="steps" data-nextstep="step1-1">
<div class="form"><span class="action">none</span>
<h2>What interests you? (select one)</h2>
<label class="val">Please select one</label>
<label for="school">
<input type="radio" id="school" name="path" value="school" />School</label>
<label for="home">
<input type="radio" id="home" name="path" value="home" />Home</label>
<label for="home">
<input type="radio" id="friends" name="path" value="friends" />Friends</label>
<label for="activities">
<input type="radio" id="activities" name="path" value="activities" />Activities</label>
<label for="health">
<input type="radio" id="health" name="path" value="health" />Health</label>
</div>
<button class="btn btn-primary formNext" type="button" name="submit_first" id="submit_first" value="">Next</button>
</div>
<div id="step1-1" class="steps" data-nextstep="step1-2">Step 1
<div class="form school">school
<button class="previous">Previous Form</button>
</div>
</div>
<div id="step1-2" class="steps"></div>
<div id="step1-3" class="steps"></div>
<div id="step1-4" class="steps"></div>
<div id="step1-5" class="steps"></div>
代码:
// hide all the steps and forms, then show the first one
$('.steps, .form').hide().eq(0).show().find('.form').eq(0).show();
// form radio change action, uses the values, adds that as "action" to the Next button
$('.form').on('change', 'input:radio', function () {
$(this).parents('.steps').find('.formNext').data('action', $(this).val());
$(this).parents('.steps').find('.action').text($(this).val());
});
// put some action on the Next button, using the action from the radio choice
// hide the form, show the one choosen
$('.formNext').click(function () {
var nextForm = $(this).parents('.steps').data('nextstep');
var action = $(this).data('action');
if (action && action.length) {
$(this).siblings('.form').find('.action').text(action + " is " + nextForm + " action");
$('#' + nextForm).show().find('.form.' + action).show();
$(this).parents('.steps').hide();
};
});
// event handler for new Previous button on second form
$('.previous').click(function () {
$(this).parents('.steps').hide().find('.form').hide();
$(this).parents('.steps').prev().show();
});
请注意,我在各个地方添加了一些类以使代码更小/更容易。