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");
        }
    });
}

我的愿望行动将如下：

当我将光标放在上述任何字段上时，输入字段的边框将为红色。
当我从场上拿走光标时，它的边框将是黑色的。

但事件仅针对密码提交，无论我放置和删除光标形式上述任何字段。

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语句，它实际上并不适用于类似数组的对象。}

试用两个代码示例here。

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。

jQuery事件绑定无法正常工作或我无法正常工作

3 个答案: