JQuery берет контроль над цветом границы ярлыка

Question

Моя функция jQuery выглядит так

$('input[type="text"]').focus(function() {  
       $("label").css("border-bottom-color", "red");
    });  
    $('input[type="text"]').blur(function() {  
       $("label").css("border-bottom-color", "#e6e6e6");
    });  

1) У меня есть куча текстовых вводов в моей форме. Что я хочу сделать, это изменить цвет нижней границы метки сфокусированного текстового поля (для каждого текстового поля есть одна метка. И я хочу изменить только цвет границы метки сфокусированного текстового поля). Но мои функции меняют цвета границ всех меток одновременно. Как решить эту проблему?

2) У меня есть 2 формы. с id формы form1 и form2. Я хочу сделать то же самое для второй формы, но цвет будет другим. Как изменить этот функционал?

Мои формы выглядят так

<form id="form1">
 ...
<label for="fname">First Name</label>
<input name="fname" placeholder="please enter your first name" type="text" /> 
 ...
</form>

<form id="form2">
 ...
<label for="job">Your Job</label>
 ...
<input name="job" placeholder="please enter your job" type="text" />
</form>

Answer 1

Используйте CSS и JavaScript:

$('input:text, input:password, textarea').focus(
    function(){
        $(this).prev('label').addClass('focused');
    }).blur(
    function(){
        $(this).prev('label').removeClass('focused');
    });

А в CSS:

#form1 label.focused {
    border-bottom: 1px solid red;
}

#form2 label.focused {
    border-bottom: 1px solid green;
}

Демонстрация JS Fiddle .

Answer 2

Как насчет этой скрипки?

http://jsfiddle.net/RvYca/3/

label атрибут for тега ссылается на атрибут id input, а не на его name.Я также перенес стили в css.

Answer 3

ваш селектор недостаточно специфичен для манипулирования css. Вы должны указать, какой ярлык вы хотите обновить. Примерно так:

$('input[type="text"],textarea,input[type="password"]').focus(function() {  
   $("label[for='" + $(this).attr('id') + "']").css("border-bottom-color", "red");
}); 

Answer 4

Для вопроса 1 используйте $ (this) в качестве селектора:

$('input[type="text"]').focus(function() {  
   $(this).css("border-bottom-color", "red");
});  
$('input[type="text"]').blur(function() {  
   $(this).css("border-bottom-color", "#e6e6e6");
});

Для вопроса 2 вы имеете в виду, что после того, как пользователь выбрал оба элемента, в любом порядке? Они не могут быть одновременно в фокусе.