jQuery 在输入焦点/模糊上删除/添加 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11169782/
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
Remove / add CSS class on input focus / blur
提问by Morten Hagh
I have a form with some input fields and a little <div>to the right of each input with a little description. What I want is to enable a CSS class for each input's own <div>with it's own description.
我有一个带有一些输入字段的表单<div>，每个输入的右侧都有一些描述。我想要的是<div>使用它自己的描述为每个输入启用一个 CSS 类。
I have made a working example here: http://jsfiddle.net/VL2FH/8/.
This uses the <div>:hover state on the input's focus state.
我在这里做了一个工作示例：http: //jsfiddle.net/VL2FH/8/。这<div>在输入的焦点状态上使用:hover 状态。
What I want to ask is: Is there some sort of a "shortcut" so I don't have to make:
我想问的是：是否有某种“捷径”，所以我不必：
$('#submit_name').bind('blur', function(){
$('#submit_name-desc').removeClass('input-desc-hover').addClass('input-desc');
});
$('#submit_name').bind('focus', function(){
$('#submit_name-desc').removeClass('input-desc').addClass('input-desc-hover');
});
?
For each input field in the form.
对于表单中的每个输入字段。
回答by Prasenjit Kumar Nag
You can generalize the focus and blurcallback like this
您可以focus and blur像这样概括回调
$('input').on('blur', function(){
$(this).next('div').removeClass('input-desc-hover').addClass('input-desc');
}).on('focus', function(){
$(this).next('div').removeClass('input-desc').addClass('input-desc-hover');
});
If your description divsare next to the input element, it will work fine.
如果您的描述divs位于输入元素旁边，则它会正常工作。
And it's better to use .on()for event binding.
?
最好.on()用于事件绑定。?
回答by jussinen
You can also achieve the same effect in CSS only by using the adjacent sibling selector +so that any .input-descdirectly following a focused input will have the different rules applied:
您还可以仅通过使用相邻的兄弟选择器在 CSS 中实现相同的效果，+以便任何.input-desc直接跟随焦点输入的内容都将应用不同的规则：
input:focus + .input-desc {
cursor: default;
width: 265px;
-moz-box-shadow: 0px 2px 5px #aaaaaa;
-webkit-box-shadow: 0px 2px 5px #aaaaaa;
box-shadow: 0px 2px 5px #aaaaaa;
animation:desc 0.3s;
-moz-animation:desc 0.3s; /* Firefox */
-webkit-animation:desc 0.3s; /* Safari and Chrome */
}
The adjacent sibling selector is support in modern browsers and Internet Explorer from version 8. ( http://reference.sitepoint.com/css/adjacentsiblingselector)
从版本 8 开始，现代浏览器和 Internet Explorer 支持相邻同级选择器。 ( http://reference.sitepoint.com/css/adjacentsiblingselector)
Here's a fiddle: http://jsfiddle.net/VL2FH/14/
这是一个小提琴：http: //jsfiddle.net/VL2FH/14/
回答by Hearaman
Check this bellow example program
检查这个波纹管示例程序
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#submit_name').bind('blur', function()
{
$('#submit_name-desc').removeClass('cls1').addClass('cls2');
});
$('#submit_name').bind('focus', function()
{
$('#submit_name-desc').removeClass('cls2').addClass('cls1');
});
});
</script>
<style>
.cls1
{
background-color: #ccc;
}
.cls2
{
background-color: #fff;
}
.submit_name-desc
{
height: 30px;
border: 1px;
}
</style>
</head>
<body>
<input type="text" id="submit_name" />
<div id="submit_name-desc">
Name Description
</div>
</body>
</html>
回答by Miroslav Popovic
Use classes instead of ids for selecting elements. If your input elements have submit-nameclass and your descriptions descclass, you could do it like this:
使用类而不是 id 来选择元素。如果你的输入元素有submit-name类和描述desc类，你可以这样做：
$('.submit-name').bind('blur', function(){
$("~ .desc", this).first().removeClass('input-desc-hover').addClass('input-desc');
}).bind('focus', function(){
$("~ .desc", this).first().removeClass('input-desc').addClass('input-desc-hover');
});
$("~ .desc", this).first()will select the first sibling of input element (this) with a class desc.
$("~ .desc", this).first()将选择this具有类的输入元素 ( )的第一个同级desc。
Here's an updated jsFiddle for that: http://jsfiddle.net/miroslav/VL2FH/13/
这是一个更新的 jsFiddle：http: //jsfiddle.net/miroslav/VL2FH/13/
Edit
编辑
Joy's solutionwith $(this).next()is much better though.
Joy的解决方案与$(this).next()要好得多，虽然。
