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

看起来没问题，可能你可以通过缓存来改善选择器的使用。

链接事件处理程序
使用变量

$('#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'); 
    }
);

此外，你应该存储将在javascript变量中使用的jquery选择器，如下所示：

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

然后致电css：

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

jquery焦点和焦点，这被认为是可接受的标记？

2 个答案: