Zeigt das nächste Eingabefeld an, wenn es mit next ausgefüllt wird()

Question

Ich versuche show das nächste Eingabefeld, nachdem das vorherige ausgefüllt wurde. Mein Versuch funktioniert. Wenn die erste Eingabe ausgefüllt ist, sollte die zweite erscheinen und die erste sollte noch machbar sein und so weiter. Im Moment erscheint die erste Eingabe beim Laden der Seite (wie ich es möchte), aber nachdem sie ausgefüllt ist, tut sie nichts.

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

Ich loggte nur die Filterausgangslänge und intro Länge, Filterausgangslänge wird immer 1 und Intro Länge beträgt 3, so dass, warum Ihre Bedingung nicht erfüllt ist und kam nicht innerhalb der Schleife, können Sie überprüfen, ob unten Ihre Anforderung erfüllt

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

Answer 2

Ich aktualisiert die Ihre Demo

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

Hier wird der aktualisiert Demo