在使用next()填充时显示下一个输入字段

Showing next input field when filled in using next()

本文关键字：显示 下一个 输入 字段 填充 next      更新时间：2023-09-26

我试图在前一个输入字段已填写后show下一个输入字段。我的尝试奏效了。如果第一个输入被填充，那么第二个输入应该出现，第一个输入应该仍然可行，依此类推。现在，第一个输入在页面加载时出现(就像我想要的那样)，但是在它被填满之后，它不做任何事情。

如果这对你有帮助的话

$(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>

我刚刚记录了过滤器输出长度和intro长度，过滤器输出长度总是1,intro长度总是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">

我已经更新了你的演示

$(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")
  })
});
.intro {
  display: none;
}
.intro:first-child {display: block;}
.next { 
    display: none; 
    padding: .5em;
    margin: .5em;
    background: #FF9800;
    border-radius: 30px;
}
<input id="name" type="text" class="intro" placeholder="name">
<input id="email" type="email" class="intro" placeholder="email">
<input id="title" type="text" class="intro" placeholder="title">
<a class="next" id="next">show div</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<

这是更新strong>演示

相关文章：