2

一个示例用例是一个分为几个步骤的注册表单。即有三个步骤：

  • 容器 1 可见
  • 容器 2 被隐藏
  • 容器 3 被隐藏

用户点击下一步按钮：

  • 容器 1 被隐藏
  • 容器 2 可见
  • 容器 3 被隐藏

用户点击下一步按钮：

  • 容器 1 被隐藏
  • 容器 2 被隐藏
  • 容器 3 可见

用户单击上一个按钮：

  • 容器 1 被隐藏
  • 容器 2 可见
  • 容器 3 被隐藏

等等。这是我尝试过的：

$('#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/

你能帮我解释一下逻辑吗？任何想法如何实现这种行为？

4

2 回答 2

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();            
 });​

这是更新的 jsfiddle 示例...

请注意，我已替换.live()为.on(), 因为.live() 现在已弃用。

于 2012-11-25T13:53:36.150 回答
0

使用这一行将为您提供一系列步骤：

var steps = document.getElementsByClassName('.form-step');

现在您可以通过使用单独的变量跟踪哪个步骤处于活动状态来遍历这些步骤。

于 2012-11-25T14:07:26.053 回答