如何使输入+标签形式一个接一个地出现？

Question

有人可以帮我解决一下如何使输入+标签在表单中出现的例子吗？

我有一个带有一些输入和标签的<form> ，我想使它们一个一个地出现。 当将按ENTER键时，标签＃1和输入＃1必须消失，第二个标签+输入必须出现。

我的脚本+ CSS和jss在jsfiddle上http://jsfiddle.net/zApq4/

我的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中做错了，但我不知道发生了什么。 谢谢大家

Answer 1

尝试遵循（这就是您想要的）：

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

在这里工作的小提琴： http : //jsfiddle.net/zApq4/3/

要么，

在这里工作的小提琴： http : //jsfiddle.net/zApq4/4/

我希望这会有所帮助。