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上访问的变量属于外部作用域,因此它包含最后一个迭代值,在您的情况下它将包含.focusblur"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语句,它实际上并不是用在类似数组的对象上.}

在这里试试这两个代码示例.