Question

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

容器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/

你能帮我解决这个问题吗？任何想法如何实现这种行为？

Answer 1

首先，将可见的存储在变量中。然后隐藏所有这些内容，并使用.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();            
 });

Here is the updated jsfiddle example...

请注意，我已将.live()替换为.on()，因为.live() is now deprecated。

Answer 2

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

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

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

在未知数量的div容器之间切换（隐藏/显示）

2 个答案:

Here is the updated jsfiddle example...