Привязка событий jQuery не работает должным образом

Question

HTML:

<input id="email" name="email" type=text />
<input id="password name="password" type="password" />

JavaScript:

var fields = ["email","password"];
for (var i in fields) {
    var field = $("#"+fields[i]);
    field.bind({
        focus: function() {
            field.css("border-color","#f00");
        },
        blur: function() {
            field.css("border-color","#000");
        }
    });
}

Мое Желание действовать будет следующим:

1. При наведении курсора на любое из вышеупомянутых полей граница поля ввода будет красной.
2. Когда я уберу курсор с поля, его рамка будет черной.

Но событие происходит только для пароля, поданного , помещаю ли я и убираю форму курсора любое из вышеуказанных полей .

Answer 1

Это действительно распространенная проблема , переменная field, доступная для события focus и blur, относится к внешней области видимости, поэтому она содержит последнюю итерацию значение, в вашем случае оно будет содержать "password".

Есть много способов решить эту проблему, например, вы можете использовать $.each, который вводит новую область действия:

jQuery.each(["email", "password"], function(index, fieldId) {
  var field = $('#'+fieldId);

  field.bind({
    focus: function() {
      field.css("border-color","#f00");
    },
    blur: function() {
      field.css("border-color","#000");
    }
  });
});

Или с помощью $(this) вместо field в обработчиках событий, т. Е .:

var fields = ["email","password"];
for (var i = 0; i < fields.length; i++) {
    $("#"+fields[i]).bind({
        focus: function() {
            $(this).css("border-color","#f00");
        },
        blur: function() {
            $(this).css("border-color","#000");
        }
    });
}

_{Примечание не по теме: также в приведенном выше примере я использую обычный цикл вместо оператора for...in, который на самом деле не предназначен для использования с объектами, подобными массиву.}

Попробуйте два примера кода здесь .

Answer 2

Это работает:

$('input#email, input#password').bind({
    focus: function() {
        $(this).css("border-color","#f00"); 
    },
    blur: function() {
        $(this).css("border-color","#000"); 
    }
});

Вам также может понадобиться очистить ваш HTML, если опечатки в вашем вопросе соответствуют действительности:

<input id="email" name="email" type="text" />
<input id="password" name="password" type="password" />

Answer 3

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

$("#email, #password").bind({ // grab both elements at once
    focus: function() {
        $(this).css("border-color","#f00");
    },
    blur: function() {
        $(this).css("border-color","#000");
    }
});

Обратите внимание, что, как в примере CMS, я использую this для ссылки на элемент в функциях обработчика. this будет ссылаться на узел, на котором было инициировано событие, поэтому оно будет #email при фокусировке в этом поле и #password при фокусировке на другом .o