javascript - 使用 jQuery 的 each() 方法创建 javascript 对象

Question

我很好奇什么问题可能比我想象的要大。

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

我决定尝试在 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 类中。当然，仍然欢迎任何评论/批评。 ;)

Answer 1

t 变量是全局的。 “keyup”事件的函数是动态评估的，这意味着它会获取 t 的最后一个值。

改变

  t = this;

到

  var t = this;