jQueryのeach（）メソッドを使用してjavascriptオブジェクトを作成する

Question

私は考えるよりも大きな質問が何であるか不思議です。

私は次のコードを使用して、テキスト入力フィールドのグループで 'keyup'を待ち受けています。ユーザーが一定時間入力を停止すると、AJAXを使用してコントローラにデータを送信します。

私はこれを達成するためにJavaScriptでOOPで私の手を試すことにしました。これは、各入力フィールドに対してtimerメソッドの新しいインスタンスが必要なためです。 （。。そう、これは恐ろしいかもしれない、私に教えてくださいJavaScriptでOOPするのは非常に新しい絶対に、明確イムする）

ここではその方法で、メインクラスです：

function FieldListener(entity){ 
     t = this; 

     t.typingTimer;    // Timer identifier 
     t.doneTypingInterval = 1000; // Time in ms. e.g.; 5000 = 5secs   
     t.entity = entity; 

     entity.bind("keyup", function(){t.setTimer();}); 
    } 

    FieldListener.prototype.setTimer = function(){ 
     t = this; 

     // User is still typing, so clear the timer. 
     clearTimeout(t.typingTimer); 

     // Get the field name, e.g.; 'username' 
     t.entityType = t.entity.attr("name"); 
     // If the value is empty, set it to a single space. 
     if(!(t.val = t.entity.val())){ 
     t.val = ' '; 
     } 
     t.noticeSpan = t.entity.siblings("span"); 
     // Display 'waiting' notice to user. 
     t.noticeSpan.html('...') 

     t.typingTimer = setTimeout(function(){t.doneTyping();},t.doneTypingInterval); 
    } 

    FieldListener.prototype.doneTyping = function(){ 
     // Encode for passing to ajax route. 
     t = this; 

     valueType = encodeURIComponent(t.entityType); 
     value = encodeURIComponent(t.val); 

     $.ajax({ 
     url: '/check/'+valueType+'/'+value, 
     type: 'GET', 
     processData: false 
     }) 
     .done(function(validationMessage){ 
     t.noticeSpan.html(validationMessage); 
     }) 
     .fail(function(){ 
     t.noticeSpan.html("Something went wrong. Please try again."); 
     });  
    } 

だからここから、私は思いますすべての入力フィールドに対してFieldListenerクラスのオブジェクトを作成できるようにします。

私はそうのようにそれぞれのIDを持っている場合、私はそれを容易に行うことができます知っている：

var fieldListener = new FieldListener($("#someFieldID")); 

しかし、私は与えられたクラス名を持つすべてのフィールドを反復処理したいと思います。これに近い何か？：

i = 0; 
    $(".info-field").each(function(){ 
     i = new FieldListener($(this)); 
    }); 

しかし、これはうまくいかない（とてもうまく見えない）。

どのような考えですか？ （また、クラス/メソッドのコードに対する批評/改良についても興味があります。）

編集：@ ChrisHerringの質問によると、問題はオブジェクトを作成するようですが、それぞれの最後の要素） 方法。だから、「の.info-フィールド」クラスで最後の入力フィールドに関連付けられたスパンがvalidationMessageは関係なく、私が入力していたフィールドのAJAXから返さ表示

は

UPDATEは：。

それは何かのように思えると間違っています新しいオブジェクトの作成。 fieldListener2はfieldListener1を開始するときに保存された変数を上書き

var fieldListener1 = new FieldListener($("#someFieldID")); 
    var fieldListener2 = new FieldListener($("#someOtherFieldID")); 

たとえば、むしろ各（）メソッドを通して繰り返すよりも、あれば、私は単純にそうような別の有する1つのクラスの開始に従います。これは、id "#someFieldID"で入力フィールドに入力すると、id "#someOtherFieldID"の入力フィールドに入力しているかのように動作することを意味します。思考？ （今のところ解決）

UPDATE＃2：

私が今の問題を解決したようです。私は 't = this'の前に 'var'を追加する必要がありました。 FieldListenerクラスに格納されます。どんなコメント/評論も当然歓迎されます。 ;）

Answer 1

t変数はグローバルです。 "keyup"イベントの関数は動的に評価されます。つまり、tの最後の値を取得します。

変更

t = this; 

var t = this; 

Answer 2

バインディングを処理するには、jqueryの.on()を使用する必要があります。

$(body).on({ 

    keyup: function() { HandleKeyUpEvent($(this)); }, 
    keydown: function() { HandleKeyDownEvent($(this)); } 

    }, ".info-field"); 

私は、これは（プロトタイプを使用して）元のコーディングのアイデアから出発ですが、それはあなたがするintented何場合、それはまだ、OOPになります実現しています。

Answer 3

私はあなたがFieldListenerオブジェクトの配列をしたいと思う。など

var myListeners = []; 
i = 0; 
$(".info-field").each(function(){ 
    myListeners[i] = new FieldListener($(this)); 
    i++ 
}); 

これはmyListeners[1]が第二のリスナーである、あなたにmyListeners[0]は、ページ上の最初の.info-fieldのリスナーであるFieldListenersのリストを、あげる、

---

編集：それはあなたが問題を解決したようだ。この回答は、後で便利になるかもしれないので、私はそれを削除しません。 =）