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

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

• 容器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:

步骤1
步骤二
步骤三

这是我的小提琴：

---

你能帮我解释一下逻辑吗。你知道如何实现这种行为吗？

首先，将可见的存储在变量中。然后隐藏所有这些内容，并使用查找前面可见的内容后面的内容，然后

.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（）

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

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

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

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