javascript - 为什么 $ ("input[id=' username' ]") works and $("#username") 不会？

Question

更新我想我很快就假设了 voodoo jquery 之谜。我注意到我确实使用了两次“用户名”ID，这就是问题所在。第二个用户名 id 是通过从 php 注入(inject)页面的 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 block ，与上面的完全相同，用于密码、电子邮件、名字等。

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

问题出在用户名上——它的标签确实变成了红色，但它的输入字段没有变成#ffc9c9。我没有看到它不起作用的任何原因，我使用同一行:

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

对于每一个其他 block ，它都适用于它们。

另请参阅注释行:

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

确实有效并解决了我的需求。但这并没有解开谜团，我试图弄清楚为什么上面的行不起作用。还注意到我已经使用 firebug 进行了调试并获得了预期的结果，例如:

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

归结为:为什么 $("input[id='username']") 在我尝试更改它的 css 但 $("#username") 不会吗？

Answer 1

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