Почему $ ("input [id = 'username']") работает и $ ("# username") не будет?

Question

Обновление Я предполагаю, что я должен был быстро принять загадку jQuery voodoo. Я заметил, что дважды использую идентификатор «username», и это проблема. второй идентификатор имени пользователя был добавлен на страницу через html-код, который был введен на страницу с php, поэтому я не мог увидеть его в исходном файле сначала.

Я пишу этот код подтверждения 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"); 

делает работу и решает мою потребность. но это не решает загадки, и я пытаюсь понять, почему не работает эта линия. также заметить, что я отлажена с поджигатель и получили ожидаемые результаты, например:

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

Она сводится к следующему: почему $("input[id='username']") работает, когда я пытаюсь изменить это CSS, но $("#username") не будет?

Answer 1

Это потому, что идентификаторы должны быть уникальными, а идентификатор селектора выбирает только первый элемент с определенным идентификатором, вместо этого вы должны использовать классы. Вы получите тот же результат, используя метод .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"); 
} 

ДОБАВЛЕНО:

Если вы intialise вашей строки ошибки перед, если блок, он работает:

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