Пропустить текущий элемент как параметр функции обратного вызова в цикле

Question

Я действительно делаю очень простой пример о формах HTML5 и пользовательских обновлениях проверки пользовательского интерфейса. Я довольно близок к результату в плане поведения, однако я застрял в деталях в своем JS-коде.

В основном я присоединяю событие ввода ко всем входным элементам формы. Функция обратного вызова проверяет действительность текущего элемента и применяет собственный класс для стилирования элемента в режиме «в реальном времени».

Единственная проблема, с которой я сталкиваюсь, это то, что мне нужно передать текущий элемент параметру функции обратного вызова в обработчике событий. Поскольку мне нужно прикрепить это событие к каждому элементу ввода, я использую цикл for.

Я получаю предупреждение jslint: не выполняйте функции внутри цикла.

Я не уверен, как это решить (я понимаю, что это значит). Я не знаю, передать элемент в качестве параметра функции обратного вызова без использования анонимной функции.

Итак, вопросы: как передать текущий элемент в качестве параметра внешней функции для разрешения предупреждения jslint.

Если у кого-то есть лучший способ справиться с этим и может исправить его до более эффективного кода, который будет высоко оценен. Вот пример, который может послужить позже для некоторых учеников.

вот codepen: http://codepen.io/anon/pen/bGDsB

Answer 1

Ваш случай может быть решена путем замены для цикла и добавления функции:

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, bu Это не позволяет создать новую функцию на каждой итерации цикла.