jquery 在输入焦点上将类添加到父级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10878113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery add class to parent on input focus
提问by user930026
I have a contact form. I want to add class to parent div of the input box on the input:focus. Here is the fiddle. I want that not just the input box but the div background color should change to purple on the input focus.
我有一个联系表格。我想将类添加到 input:focus 上输入框的父 div。这是小提琴。我希望不仅输入框而且 div 背景颜色应该在输入焦点上变为紫色。
Markup:
标记：
<div class="round">
<div class="round_label">name</div>
<input type="text" class="round_text">
</div>
Javascript:
Javascript：
jQuery(document).ready(function($) {
$(".round_text:focus").parent().css('background', '#8b66ac');
$('.round_text:focus').parent().css('background-color', 'red');
});
CSS:
CSS：
.round {
background: none repeat scroll 0 0 #F3F3F3;
border-radius: 30px 30px 30px 30px;
border-top: 1px solid #B2B2B2;
height: 50px;
padding-left: 20px;
width: 440px;
}
.round_text:focus {
background: none repeat scroll 0 0 #8b66ac;
}
.round_label {
border-right: 1px solid #D1D1D1;
color: #B6B6B6;
float: left;
font-size: 16px;
height: 40px;
padding-top: 10px;
width: 156px;
}
.round_text {
background: none repeat scroll 0 0 #F3F3F3;
border: medium none;
color: #424242;
float: left;
height: 50px;
width: 240px;
}
Also, Can you help me as if i need to add two properties eg:
另外，你能帮我吗，好像我需要添加两个属性，例如：
$(".round_text").focus(function(){
$(this).parent().css('background', '#8b66ac','color','#fff');
}).blur(function(){
$(this).parent().css('background', /*color*/);
})
回答by Shefali Aggarwal
You can add class instead and give the style
您可以改为添加类并提供样式
jQuery(document).ready(function($) {
$(".text").focus(function(){
$(this).parent().removeClass("round");
$(this).parent().addClass("bluebg");
}).blur(function(){
$(this).parent().removeClass("bluebg");
$(this).parent().addClass("round");
})
});
.bluebg {
background: none repeat scroll 0 0 #8b66ac;
color:#623886;
}
回答by charlietfl
Use focus event
使用焦点事件
$(".round_text").focus(function(){
$(this).parent().css('background', '#8b66ac');
}).blur(function(){
$(this).parent().css('background', /*color*/);
})
EDIT: Alternate solution using toggleClass()
编辑：使用 toggleClass() 的替代解决方案
CSS
CSS
.round_text:focus, .round.is_focused {
background: none repeat scroll 0 0 #8b66ac;
}
JS
JS
$(".round_text").on('focus blur', function(){
$(this).parent().toggleClass('is_focused');
})
回答by charlietfl
Try this
尝试这个
$("input").on("focus",function(){
$(this).parent().addClass("any_class").css("background","purple");
});
回答by Jashwant
If I am getting your question right,
如果我问对了你的问题，
You are selecting focusedelements, but you need to change css of parent divon focusevent.
您正在选择focused元素，但您需要div在focus事件上更改父级的 css 。
Do this,
做这个，
jQuery(document).ready(function($) {
$(".round_text").focus(function(){
$(this).parent().css('background', '#8b66ac');
})
});
