在输入焦点/模糊上删除/添加CSS类

我有一个表单，其中包含一些输入字段，每个输入的右侧都有一个带有少量描述的<div>。我想要的是为每个输入自己的<div>启用一个 CSS 类，并带有它自己的描述。

我在这里举了一个工作的例子：http://jsfiddle.net/VL2FH/8/。这将在输入的焦点状态上使用<div> ：悬停状态。

我想问的是：有没有某种"捷径"，这样我就不必做：

$('#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');
});

对于表单中的每个输入字段。

你可以像这样概括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');
});

如果您的描述divs位于输入元素旁边，它将正常工作。

最好使用 .on() 进行事件绑定。

演示：http://jsfiddle.net/joycse06/VL2FH/11/

您也可以仅在 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 */  
}

相邻的同级选择器支持现代浏览器和版本 8 的 Internet Explorer。（ http://reference.sitepoint.com/css/adjacentsiblingselector ）

这里有一个小提琴：http://jsfiddle.net/VL2FH/14/

查看这个波纹管示例程序

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

使用类而不是 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()将选择输入元素（this）的第一个同级，并带有类desc。

这是更新的jsFiddle：http://jsfiddle.net/miroslav/VL2FH/13/

编辑

不过，乔伊对$(this).next()的解决方案要好得多。

相关内容

最新更新

热门标签：