javascript - 使用 next() 填写时显示下一个输入字段

Question

我正在尝试在上一个输入字段已填写后显示下一个输入字段。我的尝试正在奏效。如果第一个输入已填写，那么第二个应该出现，第一个应该仍然可行，依此类推。现在，第一个输入出现在页面加载时(就像我希望的那样)，但在它被填充后它什么都不做。

Here it is in a fiddle if this helps

$(function () {   
    var intro = $('.intro');

    intro.on('keypress', function() {
        if (intro.filter(function (){return $(this).val().length }).length == intro.length) {
            $('input').next('.intro').fadeIn(500);
        }
       /* else {
            $('.intro').hide();
        }*/
    });
});

.intro {
  display: none;
}
.intro:first-child {display: block;}
.next { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="name" type="text" class="intro">
<input id="email" type="email" class="intro">
<input id="title" type="text" class="intro">


<a class="next">show div</a>

Answer 1

我刚刚记录了过滤器输出长度和介绍长度，过滤器输出长度将始终为 1，介绍长度为 3，所以为什么您的条件不满足并且没有进入循环，您可以检查以下是否满足您的要求

$(function () {   
    var intro = $('.intro');

    intro.on('keypress', function() {
        if ($(this).val().length > 0) {
            $(this).next('.intro').fadeIn(500);
        }         
       /* else {
            $('.intro').hide();
        }*/
    });
});

.intro {
  display: none;
}
.intro:first-child {display: block;}
.next { display: none; }

<input id="name" type="text" class="intro">
<input id="email" type="email" class="intro">
<input id="title" type="text" class="intro">