0

認めざるを得ないのは、私が独学で実験し、学習してきた間に多くの jQuery スクリプトを見て、純粋な直感によってこのソリューションを思いついたことです。

この種の質問を直接する人が私にはいないので、助けと指導を求めてここに来ました。

--

フォームへの入力中にフォーカスする必要がある行が強調表示されるWufoo のプランのフォームに触発されて、私はこのスクリプトを作成しました (私は jQuery や JavaScript の達人ではありません。私はまだ学習と練習を続けています)。

//Improve usability by highlighting the row the user needs to focus on:
$(function() {
        //When input element has focus
        $('input').focus(function(){
            //Add the class to its corresponding row
            $(this).parent().parent('.row').addClass('focus'),
                //And when it loses focus
                $('input').blur(function(){
                    //Remove the class
                    $(this).parent().parent('.row').removeClass('focus');
                });
        });
});

したがって、このスクリプトをより適切に記述したり、最適化/短縮したりする方法があるかどうか疑問に思っていました。そうでない場合は、私が書いた方法でOKです。それで問題ありません。私が学びたいのは、可能であればコードを最適化する方法だけです。それだけです。

確認したい場合は、Codepen でデモを作成しました。

前もって感謝します。

4

3 に答える 3

4

あなたはこれを行うことができます：

//Improve usability by highlighting the row the user needs to focus on:
$(function() {
        $('input').focus(function(){
            $(this).closest('.row').addClass('focus'); // Change here                    
        }).blur(function(){ // Change here
           $(this).closest('.row').removeClass('focus'); // Change here
        });
});

またはさらに短い！

$(function(){
    $("input").on("focus blur", function(){
        $(this).closest(".row").toggleClass("focus");
    });
});

あなたは1つのことを完全に間違っていました!! 焦点を合わせるたびに、新しいぼかしを各入力にバインドします!

于 2013-01-30T20:51:28.123 に答える
4

コードは良さそうです。私が行う唯一の変更はclosest()、チェーン呼び出しの代わりに使用することです。DOMparent()を変更する場合は、jQuery コードを変更する必要があるためです。また、blur()ハンドラーをハンドラーの外に移動しfocus()ます。これを試して：

$(function() {
    $('input')
        .focus(function() {
            $(this).closest('.row').addClass('focus');
        })
        .blur(function() {
            $(this).closest('.row').removeClass('focus');
        });
});
于 2013-01-30T20:51:41.923 に答える
1

偶数ハンドラーとイベント バインディングを分離しておくようにします。これは、バインディングが発生したときにページにあった行にのみイベントをバインドするとは異なり、.on()現在および将来のすべての要素にイベントを実際にバインドする で行うと便利です。.row.focus()

この方法では、コードをどちらかにラップする必要はありません$(function(){});。また、jQuery とマークアップを混在させる代わりに、含まれている .js ファイルにイベント バインディングを含めることができます。

さらに、構造を少し変更しても壊れないため、.closest()代わりに使用します。.parent().parent()あなた.rowがまだそこにいるという条件で。

var onRowFocus = function(){
    $('.row').removeClass('focus');
    $(this).closest('.row').addClass('focus');
};

$('.row').on('focus', 'input', onRowFocus);

.blurまた、イベントをバインドする必要はまったくありません。focusフォーカスのある行にクラスを追加する前に、すべての行からクラスを削除するだけです。イベント ハンドラーが減り、コードが減り、保守が容易になります。

于 2013-01-30T21:20:06.683 に答える