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']")在我尝试更改它的css时有效，但$("#username")不会？

Answer 1

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

Answer 2

尝试如下：

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

Answer 3

此jsfiddle显示#username有效。但是我必须删除你的行，它将值赋予错误，因为它似乎失败了。

代码：

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

为什么$（“input [id ='username']”）有效，$（“＃username”）不行？

3 个答案: