8

いくつかの入力フィールドを含むフォームがあり<div>、各入力の右側に少し説明があります。私が望むのは、<div>独自の説明を使用して、入力ごとに独自の CSS クラスを有効にすることです。

ここで実際の例を作成しました: 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/

編集

ただし、ジョイのソリューション$(this).next()ははるかに優れています。

于 2012-06-23T13:22:53.093 に答える