javascript - 如何让表单中的input+label一个一个出现？

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/

我希望它有帮助。