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

这个小提琴怎么样？

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

label 标签的for 属性引用input 的id 属性，而不是它的name。 我也将样式移到了 css 中。

Answer 2

同时使用 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 demo.

Answer 3

对于问题 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，您的意思是，在用户选择了这两个项目之后，以任一顺序？它们不能同时聚焦。

Answer 4

您的选择器对于操作 css 不够具体。您必须具体说明要更新的标签。像这样的：

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