将当前元素作为参数传递给循环中的回调函数

Question

我实际上正在做一个关于HTML5表单和自定义UI界面验证更新的非常简单的例子。就行为而言，我非常接近结果，但是我被困在我的JS代码中的一些细节上。

基本上，我将输入事件附加到所有表单的输入元素。回调函数只是检查当前元素的有效性并应用自定义类来"实时"设置元素的样式。

我面临的唯一问题是我需要将当前元素传递给事件处理程序中回调函数的参数。由于我需要将此事件附加到每个输入元素，因此我使用的是 for 循环。

我收到jslint警告：不要在循环中制作函数。

我

不确定如何解决这个问题（我确实明白这意味着什么）。我不知道在不使用匿名函数的情况下将元素作为参数传递给回调函数。

所以问题是：如何将当前元素作为参数传递给外部函数以解决 jslint 警告。

如果有人有更好的方法来处理这个问题，并且可以将其更正为更有效的代码，我们将不胜感激。这个例子以后可以为一些学生服务。

这是一个代码笔：http://codepen.io/anon/pen/bGDsB

Answer 1

您可以通过替换 for 循环并添加一个函数来解决您的情况：

for (var i=0; i<inputs.length; i++) {
    attachCheck(inputs[i]);
}
function attachCheck(inp) {
    inp.addEventListener('input', function() {
        check(this);
    });
}

修改check()以使用this不是更好吗，例如：

function check() {
    if(this.value.length) {
        // ... all elm replaced by this ...
}

和循环：

for (var i=0; i<inputs.length; i++) {
    inputs[i].addEventListener('input', check);
}

Answer 2

与其定义一个简单地调用check()的新函数，不如直接将check传递给addEventListener()：

  for (var i=0; i<inputs.length; i++) {
      inputs[i].addEventListener('input', check);
  }

然后，您可以稍微更改check()以解决此问题：

  function check(e) {
      var elm = e.srcElement;
      ...
  }

我还没有针对 jsLint 对此进行测试，但它确实避免在循环的每次迭代中创建新函数。