Question

我有一个表单，其中包含一些输入字段和每个输入右侧的一点<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');
});

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

Answer 1

您可以像这样概括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/

Answer 2

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

Answer 3

检查以下示例程序

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

Answer 4

使用类而不是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's solution与$(this).next()相比要好得多。

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

4 个答案: