0

私はjQueryを学んでいます/より良くしようとしています。次のマークアップが許容できるかどうか、または同じことを達成するためのよりクリーンで小さな方法があるかどうか疑問に思っていましたか?

$(document).ready(function(){
    $('#searchwrapper .searchbox').focus(function(e) {
            $('#searchwrapper .searchbox_submit').css('color', '#999999'); 
        }
    );
    $('#searchwrapper .searchbox').focusout(function(e) {
            $('#searchwrapper .searchbox_submit').css('color', '#dddddd'); 
        }
    );
});

編集/解決策

Arun P Johnyとsenyor Toniの js に感謝します。

$(document).ready(function(){
    var swap_color = $('#searchwrapper .searchbox_submit');
    $('#searchwrapper .searchbox').focus(function(e) {
            swap_color.css('color', '#999999'); 
        }
    ).blur(function(e) {
            swap_color.css('color', '#dddddd'); 
        }
    );
});
4

2 に答える 2

1

大丈夫そうです。おそらく、セレクターをキャッシュすることで、セレクターの使用法を改善できます。

  1. イベント ハンドラをチェーンする
  2. $('#searchwrapper .searchbox_submit')変数を使用してセレクターをキャッシュする

試す

$(document).ready(function(){
    var searchbox_submit = $('#searchwrapper .searchbox_submit');
    $('#searchwrapper .searchbox').focus(function(e) {
            searchbox_submit.css('color', '#999999'); 
        }
    ).focusout(function(e) {
            searchbox_submit.css('color', '#dddddd'); 
        }
    );
});
于 2013-06-26T11:03:21.957 に答える
1

連鎖してより最適化されたjquery文を作成し、blur代わりにfocusoutこれを使用できます。これは、フォーカスアウトイベントをバブルするため、おそらく次のようにイベントのバブルは必要ありません。

$('#searchwrapper .searchbox').focus(function(e) {
        $('#searchwrapper .searchbox_submit').css('color', '#999999'); 
    }
).blur(function(e) {
        $('#searchwrapper .searchbox_submit').css('color', '#dddddd'); 
    }
);

また、次のように、将来使用される jquery セレクターを javascript 変数に格納する必要があります。

var selector = $('#searchwrapper .searchbox_submit');

次に呼び出しますcss：

$('#searchwrapper .searchbox').focus(function(e) {
        selector.css('color', '#999999'); 
    }
).blur(function(e) {
        selector.css('color', '#dddddd'); 
    }
);
于 2013-06-26T11:03:32.620 に答える