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。我想做同样的事情来第二种形式，但颜色将是另一种。如何修改这个func？

我的形式看起来就像是

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

答

这把小提琴怎么样？

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

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

如何修改输入类型文本和密码的这个func？ –

很简单：$（'input [type =“text”]，input [type =“password”]'）或者使用$（'input'）...如果可以的话。 – biziclop

和我的第二个问题？ –

答

问题1，使用$（本）为您的选择：

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

对于问题2，你的意思是，用户选择后两个项目，以任何顺序？他们不能同时关注。

不，不，不......看来，你不明白我的问题。请重新阅读。 –

每个文本框都有一个标签。而我想改变只有集中的文本框label'sborder颜色 –

专注于1文本框，但改变了所有标签http://prntscr.com/3w300和模糊事件的颜色http://prntscr.com/3w30v –

答

您的选择器不足以操纵css。您必须具体说明要更新哪个标签。事情是这样的：

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

如何修改输入类型文本和密码的这个func？ –

我在上面为您添加了其他选择器。 – danpickett

我有2种形式。用id的form1和form2。我想做同样的事情来第二种形式，但颜色将是另一种。如何修改这个func？ –

答

使用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。

jQuery的同时控制标签的边框颜色

相关推荐