为什么$("input[id='username']")工作，而$("#username")不能工作？

Question

更新我想我很快就开始相信巫毒jquery的神秘之处了。我注意到我确实两次使用“用户名”Id，这就是问题所在。第二个用户名id是通过从php注入页面的html代码添加到页面中的，所以我一开始无法在源代码中看到它。

我正在编写这个客户端验证jquery代码：

username = $("#username").val();

if (username.length < 5 || username.length > 15 || !username_regex.test(username)) {
                error += "invalid username\n";
                $(this).find("label[for='username']").css("color", "red");
                $("#username").css("background-color", "#ffc9c9").css("border-color", "red"); //this doesn't work
                // $("input[id='username']").css("background-color", "#ffc9c9").css("border-color", "red");  //this works
            }

而html：

  <p><label for="username">Username</label><input id="username" type="text" name="username"/></p>

我还有几个jquery/html块，与上面的完全相同，用于密码、电子邮件、名字等等。

此验证代码是onsubmit处理程序的一部分，其他所有块都正常工作:当某个字段不符合验证标准时，其标签的颜色变为红色，其输入字段的背景色变为#ffc9c9。

问题在于用户名--它的标签确实会变成红色，但是它的输入字段不会变成#ffc9c9。我看不出有什么不起作用的理由，我用的是同一句话：

 $("#*input_field_id*").css("background-color", "#ffc9c9").css("border-color", "red");

对于其他的每一个街区，它的工作对他们很好。

还请注意注释行：

$("input[id='username']").css("background-color", "#ffc9c9").css("border-color", "red");

也能解决我的需要。但这并不能解开谜团，我正试图弄明白为什么上面的线不起作用。还请注意，我使用了firebug进行了调试，并获得了预期的结果，例如：

$("#username").attr("name"); // = username, as expected

归结起来是这样的:为什么当我试图改变$("input[id='username']")时，$("#username")会工作，但$("#username")不会？

Answer 1

这是因为ID必须是唯一的，并且ID选择器只选择带有特定ID的第一个元素，所以应该使用类。您将通过使用.getElementById()对象的document方法获得相同的结果，这是预期的行为。属性选择器以不同的方式工作。

Answer 2

尝试如下：

$("#username").css({'background-color': "#ffc9c9",'border-color': "red"});   

Answer 3

这个小提琴显示#用户名有效。但是，我不得不删除您为错误赋值的行，因为它似乎失败了。

代码：

 if (username.length < 5 || username.length > 15 || !username_regex.test(username)) {
     $(this).find("label[for='username']").css("color", "red");
     $("#username").css("background-color", "#ffc9c9").css("border-color", "red");
 }

加：

如果在If块之前使用错误字符串，则可以：

 username = 'aaa';
 error = '';
 if (username.length < 5 || username.length > 15 || !username_regex.test(username)) {
     error += "invalid username\n";
     $(this).find("label[for='username']").css("color", "red");
     $("#username").css("background-color", "#ffc9c9").css("border-color", "red");
 }