次の値の改行コードを変更する

Question

私は、ユーザーが入力を入力できるようにするシステムを持っています。入力したときに新しいものが表示されます。私はコードを変更し、新しい入力を追加しなくなりました。

スニペットにはラベルが付いていません。 This is a Fiddle with my attempt at adding the labels。

誰かが私が間違っているのを見ていますか？

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

あなたは入力にハンドラを追加し、

$(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イベントが存在しない入力の親に移動する必要があります。あなたは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/