Question

我很好奇可能比我想象的更大的问题。

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

我决定尝试在JOP中使用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类的对象。

我知道如果每个人都有这样的身份证明我可以轻松地做到这一点：

   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

我认为你应该使用jquery的.on()来处理绑定。

$(body).on({

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

  }, ".info-field");

我意识到这与您原来的编码理念背道而驰（使用原型）但它仍然是OOP，如果这是您打算做的事情。

Answer 2

我想你想要一组FieldListener个对象。

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

这会给你一个FieldListeners的列表，其中myListeners[0]是页面上第一个.info-field的监听器，myListeners[1]是第二个监听器，等

编辑：看起来你已经解决了这个问题。不过，这个答案后来仍然可以派上用场，所以我不会删除它。 =）

Answer 3

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

更改

  t = this;

到

  var t = this;

使用jQuery的each（）方法创建javascript对象

3 个答案: