Ändern des nächsten Wertunterbrechungscodes

Question

Ich habe ein System, das es einem Benutzer ermöglicht, Eingaben einzugeben, und dann erscheint darunter ein neuer, wenn er ausgefüllt wird. Das Problem, auf das ich stoße, ist das Hinzufügen von Labels zu den Eingaben und wann Ich habe den Code geändert, er fügt keine neuen Eingaben hinzu.

Das Snippet ist ohne die Beschriftungen. This is a Fiddle with my attempt at adding the labels.

Kann jemand sehen, was ich falsch mache?

$(function() { 
 
    var elems = $('.intro').on('input', function() { 
 
     
 
     if (this.value.trim().length > 2) { 
 
     \t \t $(this).next('input').addClass('block'); 
 
     } 
 

 
     
 
     $('#intro-button').toggle(
 
      elems.filter(function() { 
 
      \t return this.value.trim() !== ""; 
 
      }).length === elems.length 
 
     ) 
 
     
 
    }); 
 
});

.intro { 
 
\t opacity: 0; 
 
\t padding: 10px 15px; 
 
\t margin: 40px auto; 
 
\t visability: hidden; 
 
} 
 
.intro:first-child { 
 
\t display: block; 
 
\t opacity: 1; 
 
} 
 
.block { 
 
\t display: block; 
 
\t visability: visible; 
 
\t opacity: 1; 
 
    -webkit-animation: fadein 1s ease-in; 
 
    -moz-animation: fadein 1s ease-in; 
 
    animation: fadein 1s ease-in; 
 
} 
 
.next { 
 
\t display: none; 
 
} 
 
.button-center { 
 
\t margin: 40px auto; 
 
\t text-align: center; 
 
} 
 
#intro-button { 
 
\t display: none; 
 
\t padding: 10px 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
\t \t <div id="intro-info"> 
 
\t \t \t \t <input id="name" type="text" class="intro"> 
 
\t \t \t \t <input id="email" type="email" class="intro"> 
 
\t \t \t <input id="title" type="text" class="intro"> 
 
\t \t \t <div class="button-center"> 
 
\t \t \t \t <button id="intro-button">Proceed</button> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

Sie müssen Handler Eingang hinzufügen und auf Eltern von Eingangs

$(function() { 
    var elems = $('.intro input').on('keypress', function() { 

    if ($(this).val().trim().length > 2) { 
     $(this).parent().next('label').addClass('block'); 
    } 


    $('#intro-button').toggle(
     elems.filter(function() { 
     return this.value.trim() !== ""; 
     }).length === elems.length 
    ) 

    }); 
}); 

https://jsfiddle.net/xfbLskhn/3/

Answer 2

label Ereignis existiert nicht bewegt. Sie können js bestehende adjust this.firstElementChild

$(function() { 
    var elems = $('.intro').on('input', function() { 
    if (this.firstElementChild.value.trim().length > 2) { 
     $(this).next('label').addClass('block'); 
    } 


    $('#intro-button').toggle(
     elems.filter(function() { 
     return this.firstElementChild.value.trim() !== ""; 
     }).length === elems.length 
    ) 

    }); 
}); 

jsfiddle https://jsfiddle.net/xfbLskhn/4/