3

更新 我想我很快就假设了 voodoo 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")不会起作用时？

4

3 回答 3

2

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

于 2013-10-05T10:06:19.513 回答
0

尝试如下：

$("#username").css({'background-color': "#ffc9c9",'border-color': "red"});
于 2013-10-05T10:07:52.233 回答
0

这个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");
 }
于 2013-10-05T10:16:36.927 回答