一个示例用例是一个分为几个步骤的注册表单。即有三个步骤:
用户点击下一个按钮:
用户点击下一个按钮:
用户点击上一个按钮:
等等。这就是我试过的:
$('#btn-next-step').live('click', function(){
$('.form-step').each(function(){
if($(this).is(':visible')){
$(this).hide();
}else{
$(this).show();
return false;
}
});
});
HTML:
<form>
<div class="container-fluid form-step form-step1">
step1
</div>
<div class="container-fluid form-step form-step2">
step2
</div>
<div class="container-fluid form-step form-step3">
step3
</div>
</form>
这是我的小提琴:http://jsfiddle.net/feFcu/
你能帮我解决这个问题吗?任何想法如何实现这种行为?
答案 0 :(得分:3)
首先,将可见的存储在变量中。然后隐藏所有这些内容,并使用.next('.form-step')
找到跟随之前可见的那个,并.show()
。
$('#step').on('click', function(){
// Find the visible one and store in a variable
var showing = $('.form-step:visible');
// Hide all of them (including the currently visible one)
$('.form-step').hide();
// Find the next one with .next() and make it visible
showing.next('.form-step').show();
});
请注意,我已将.live()
替换为.on()
,因为.live()
is now deprecated。
答案 1 :(得分:0)
使用此行将为您提供一系列步骤:
var steps = document.getElementsByClassName('.form-step');
现在,您可以通过使用单独的变量跟踪哪个步骤处于活动状态来完成这些步骤。