8

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

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

我想问的是：是否有某种“捷径”，所以我不必做：

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

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

4

4 回答 4

19

您可以像这样概括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()用于事件绑定。​</p>

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

于 2012-06-23T13:31:25.677 回答
4

您也可以仅通过使用相邻兄弟选择器在 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/

于 2012-06-23T22:54:04.927 回答
2

检查下面的示例程序

    <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>
于 2012-06-23T13:32:20.423 回答
0

使用类而不是 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/

编辑

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

于 2012-06-23T13:22:53.093 回答