jquery focus 和 focusout，这被认为是可接受的标记吗？

Question

我正在学习/尝试在 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'); 
        }
    );
});

Answer 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'); 
        }
    );
});

Answer 2

您可以链接以制作更优化的 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'); 
    }
);