Javascript jQuery控制label'；s边框颜色

我的jQuery函数看起来是这样的

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

<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>

---

1） 我的表单中有一堆文本输入。我想做的是更改聚焦文本框标签的底部边框颜色（每个文本框有一个标签。我只想更改聚焦文本框标签的边框颜色）。但我的函数会同时更改所有标签的边框颜色。如何解决这个问题

---

2） 我有两张表格。id为form1和form2。我想做同样的事情，以第二形式，但颜色将是另一个。如何修改此函数

我的表格是这样的

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

<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>

...
名字
...
...
你的工作
...

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

这把小提琴怎么样

标签

标签用于属性的标签引用一个

输入

的

id

属性，而不是它的

名称

。

---

我也将样式移到了css中。

您的选择器不够具体，无法操作css。必须明确要更新的标签。大概是这样的：

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

---

同时使用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;
}

---

.

不不不。。。看来你不明白我的问题。请重新阅读。每个文本框都有一个标签。我只想更改聚焦文本框标签的顺序颜色聚焦在一个文本框上，但更改了所有标签的颜色，在模糊事件中，我有两个表单。id为form1和form2。我想做同样的事情，以第二形式，但颜色将是另一个。如何修改此函数？如何修改此函数的输入类型文本和密码？很简单：$（'input[type=“text]”，input[type=“password]”）或仅使用$（'input'）。。。如果可以的话，我有两张表格。id为form1和form2。我想做同样的事情，以第二形式，但颜色将是另一个。如何修改此函数？您只需修改css，请参阅更新的FIDLE：如何修改输入类型文本和密码的此函数？我在上面为您添加了其他选择器。我有两个表单。id为form1和form2。我想做同样的事情，以第二形式，但颜色将是另一个。如何修改此函数？