Javascript 为什么$（“input[id=”用户名“&”x27；”）起作用，而$（”用户名“）赢了；T

更新 我想我很快就猜到了巫毒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
            }

对于其他的每一个区块，它都可以很好地工作

另请参见注释行：

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

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

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

---

归结到这一点：为什么当我尝试更改css时，

$（“输入[id='username']）

起作用，但

$（“#username”）

不起作用？

这是因为id必须是唯一的，并且id选择器只选择具有特定id的第一个元素，您应该改用类。使用

文档

对象的

.getElementById（）

方法将得到相同的结果，这是预期的行为。属性选择器的工作方式不同

试试下面的方法：

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

这表明#用户名有效。但我不得不删除您的行分配值的错误，因为它似乎失败了

代码：

if（username.length<5 | | username.length>15 | |！username|u regex.test（username））{
$（this.find（“label[for='username']”）css（“color”，“red”）；
$（“#username”）.css（“背景色”，“#ffc9c9”）.css（“边框色”，“红色”）；
}

增加：

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

username='aaa'；
错误=“”；
如果（username.length<5 | | | username.length>15 | |！username|u regex.test（username））{
错误+=“无效用户名\n”；
$（this.find（“label[for='username']”）css（“color”，“red”）；
$（“#username”）.css（“背景色”，“#ffc9c9”）.css（“边框色”，“红色”）；
}

您的html中没有任何重复的id吗？您试图通过以下方式实现什么：$（this）.find（“label[for='username']）.css（“color”，“red”）？这意味着什么？@jimmyweb我只有一次这个id。你提到的那条线指向用户名的标签，并把它涂成红色。“这个”并没有指向标签。哦，我想这是整条线的意思。“this”指向表单该字段是唯一的，我只在html中提到的输入字段中使用id=“username”above@Ziv

$（“[id='username']”）。length

返回什么？@undefined我想你找到了什么。奇怪的是，它返回2。问题是，我在这个页面中添加了一个公共脚本，用于注册登录表单的onsubmit处理程序，所以我使用$（“#username”）。。也有，但这不应该干扰，是吗？这里没有html，为什么我有2个“用户名”id？@Ziv文档中肯定有2个元素具有该id，如果您想查看其他元素，可以使用

console.log（$（“[id='username']））

。谜团解决了，我在一个公共外部文件中使用它。。感谢长度提示@“Frank Fajardo”我确实初始化了“error”字段，我没有在这里添加代码片段，因为我认为它非常明显，与我面临的问题无关。您是否尝试过在调试时运行脚本？如果我只是在if块之前初始化error，那么您的代码肯定可以工作。因此，在调试下运行代码可能是一项工作。有时候，显而易见的东西并不太明显。我在调试时尝试过，在查询$（“#username”）一些东西（名称、css属性等）时，它会返回预期的结果results@Ziv，所说的“预期结果”，你的意思是获得具有该id的输入元素吗？是的，但是看到我更新的答案，我有两个id，并且两者具有完全相同的属性

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

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

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