テキスト入力を検証し、入力が5文字のときに 'done' divを出力する

Question

私はこのコードをJavascriptで書いていますが、JQueryを使って動作させる必要があります。誰かが私を助けてくれますか？あなたのdone()関数を使用すると、ちょうどあなたがしたいようにjQuery

function done() 
{ 
    var valid = $("#text2").val().length; 
    if (valid > 5) 
    { 
     $('#one').append("<div class='done'></div>"); 
     $('#one').addClass("grey"); 
    } 
} 

Answer 1

が見える適応する小さな変更を加えることができる

$(document).ready(function(){ 
    //Validates the title field is at least 5 characters long. 
    $("#text2").done(function(){ 
     var value = $(this).val(); 
     if (value.length >= 5) 
     { 
      $("#one").append("<div class='done'></div>"); 
     } 
    }); 

Answer 2

：

function done() 
{ 
    var valid = document.getElementById("text2").value.length; 
    if (valid > 5) 
    { 
     document.getElementById('one').innerHTML += "<div class='done rotateone wiggler'></div>"; 
     document.getElementById('one').className += "grey"; 
    } 

jQueryの試み：Javascriptの作業

すぐにあなたの機能を実行しますか？

$(document).ready(function() { 
    $('#text2').blur(function() { // Listen to the "onblur" event on the element 
     if (this.value.length > 5) { // No need for jQuery there 
      $('#one') 
       .append('<div class="done"></div>') 
       .addClass('grey') 
     } 
    }) 
}) 

単一の要素に関数を連鎖することにより、私はDOMに1つのコールを使用する方法を参照してください：さて、ここで私はそれを行うだろう方法です（私は.blur()イベントハンドラを追加した理由を確認するために、編集を見て） ？実用的で効率的です。

Btw、innerHTMLは多くの理由（performanceを含む）が悪く、jQueryでは.append()、javacriptでは.appendChild()が好ましいです。

編集：onblurイベントでこれを有効にするように見えます。私は自分のコードを編集しました。