使用next（）

Question

我正在尝试show填写上一个输入字段之后的下一个输入字段。我的尝试正在进行中。如果第一个输入被填入，则第二个输入应该出现，第一个应该仍然可行，依此类推。现在，第一个输入出现在页面加载上（就像我想要的那样），但是在填充之后它没有做任何事情。

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，这就是为什么你的条件不满意而且没有进入循环，你能检查下面是否满足你的要求

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我已更新您的演示

a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

$("a[disabled], a.disabled").on("click", function(e){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        e.preventDefault();
})

$(function () {   
  setInterval(function() {
    if($('#name').val()){
      $('.next').css("display", "inline-block")
     }
    else{
      $('.next').css("display", "none")
    }
  }, 1);
  var inputs = ["#name", "#email", "#title"]
  var counter = 0;
  $('#next').click(function(){
   counter +=1;
   $(inputs[counter]).css("display", "block")
  })
});

以下是更新的 Demo