Javascript 如何输入+；表单中的标签是否逐个出现？

有人能帮我举一个关于如何在表单中逐个显示输入+标签的示例吗？

我有一个带有一些输入和标签的

，我想让它们一个接一个地出现。当按下回车键时，标签1和输入1必须消失，第二个标签+输入必须出现

我的脚本+css和jss在JSFIDLE上

我的js是：

 $(document).ready(function() {

        // First Show the First Element & Focus it
        $("form.fieldContainer:first-child").fadeIn(500).focus();

        // Setup a transition handler:
        $("form.fieldContainer").keyup(function(ev) {

            if $('#nextButton').click(show_next);
            {
                ev.preventDefault();
                ev.stopPropagation();

                var _next = $(this).parents('form.fieldContainer').next('form.fieldContainer');
                _next.fadeIn(500);
                _next.find("input").focus();
            }

        });

    });

我猜我在js中做错了什么，但我不知道是什么。感谢大家

尝试以下内容（这就是你想要的）：

在这里演奏小提琴：

或者

在这里演奏小提琴：

---

我希望它能有所帮助。

从用户体验的角度来看，这听起来是一个非常糟糕的主意。请注意，在CSS中，您有

表单.fieldContainer

，而它应该是

。fieldContaner

，或者

表单.fieldContainer

什么是

\nextButton

和

show\u next

？顺便说一句，if语句看起来非常无效。您的选择器是

“form.fieldContainer”

，它使用类

fieldContainer

选择

表单。但是，您需要选择表单中的类。正确的选择器应该是
form.fieldContainer
（带有额外的空间）。这不是什么新鲜事，这也是为什么你看不到的原因。甚至网页表单的分页也是用户体验的一个禁忌。你能帮我解决我的问题吗。。。我需要按submit按钮来显示第二个.fieldContainer，但我还需要隐藏第一个.fieldContainer@maverickosama92谢谢@maverickosama92谢谢@maverickosama92
var $containers = $(".fieldContainer");

    // First Show the First Element & Focus it
    $containers.eq(0).fadeIn(500).find("input").focus();

    // Setup a transition handler:
    $containers.find("input").keyup(function(ev) {
        ev.preventDefault();
        ev.stopPropagation();

        if($(this).val() == ""){
            return;   
        }
        //if enter is pressed
        if(ev.which == 13){                  
            var _next =  $(this).parents().next();
            _next.fadeIn(500);
            _next.find("input").focus();        
        }
    });