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 回答