使用jQuery'创建javascript对象；s each（）方法

我很好奇有什么问题可能比我想象的更大

我正在使用以下代码侦听一组文本输入字段上的“keyup”。如果用户在给定的时间内停止键入，我将使用AJAX将数据发送到控制器

我决定尝试用javascript实现OOP来实现这一点。这是因为我希望每个输入字段都有一个计时器方法的新实例。（说得非常清楚，我对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的问题：问题是它似乎只为each（）方法中的最后一个元素创建了对象。因此，与类“.info field”的最后一个输入字段关联的范围显示从AJAX返回的validationMessage，而不管我在哪个字段中键入

更新：

新对象的创建似乎有问题。例如，如果我没有遍历each（）方法，而是简单地按照一个类初始化另一个类，如下所示：

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

该fieldListener2在启动fieldListener1时覆盖保存的变量。这意味着，当我在id为“#someFieldID”的输入字段中键入时，其行为就像我在id为“#someOtherFieldID”的输入字段中键入一样。想法

更新#2（目前已解决）：

---

看来我现在已经解决了这个问题。我需要在't=this；'之前添加'var'在FieldListener类中。当然，任何评论/批评都是欢迎的

我认为应该使用jquery的

.on（）

来处理绑定

$(body).on({

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

  }, ".info-field");

---

我意识到这与您最初的编码思想（使用原型）不同，但如果您打算这样做的话，它仍然是面向对象的。

我想您需要一个

FieldListener

对象数组

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

这将为您提供一个

FieldListeners

列表，其中

myListeners[0]

是第一个

的侦听器。信息字段在页面上，
myListeners[1]
是第二个
的侦听器，以此类推


编辑：看起来你已经解决了这个问题。不过，这个答案以后可能仍然有用，所以我不会删除它。=）
 t变量是全局变量。“keyup”事件的函数是动态计算的，这意味着它拾取t的最后一个值

改变

  t = this;

到

你有什么错误？看起来它至少应该成功地创建对象。@ChrisHerring，它似乎创建了对象，但只为each（）方法中的最后一个元素创建了对象。因此，与类“.info field”的最后一个输入字段关联的范围显示从AJAX返回的validationMessage，而不管我在哪个字段中键入。（将此添加到OP中）我会养成在代码上运行类似jslint的东西的习惯。它不会抓住这个问题，但它会在其他问题上为您节省一些时间。谢谢您的提醒。bind（）似乎是一个较旧的jquery方法。谢谢。我自己解决了（并编辑了原始帖子），但既然这确实是答案，我会继续给你“检查”：
  var t = this;