Question

我正在尝试提高我的jQuery技能，并且我有一些代码。它的基本目的是调整背景的大小和大小，使其与响应滑块保持相同的高度，从而匹配窗口的大小;并跟踪用户是否调整了大小。

它可以更好地重构，还是很好。

$(window).load(function() {
var height = $('#display-area').css('height');
$('.skin-background')
    .css('display', 'block')
    .css('height', height);
});
$(window).resize(function() {
var height = $('#display-area').css('height');
$('.skin-background')
    .css('height', height);
});

Answer 1

// Cache elements that get used more than once
var $background = $('.skin-background');
var $displayArea = $('#display-area');

// Don't repeat yourself, put recurring actions in functions
var resizeBackground = function() {
    $background.css({
        'display': 'block',
        'height': $displayArea.height() + 'px'
    });
};

$(window).load(resizeBackground).resize(resizeBackground);

您还应该考虑“throttle”resize事件的事件处理程序，因为在调整窗口大小时，某些浏览器会激活很多。使用underscore.js，这将是：

$(window).load(resizeBackground).resize( _.throttle(resizeBackground, 100) );

Answer 2

$(window).on("load resize",function() {
var height = $('#display-area').height();
$('.skin-background')
    .css({'display':'block','height':height});
});

Answer 3

您可以使用单个选择器添加两个事件，并可以设置多个css属性，例如

$(window).load(function() {
var height = $('#display-area').css('height');
$('.skin-background')
    .css('display' : 'block','height', height);

}).resize(function() {
var height = $('#display-area').css('height');
$('.skin-background')
    .css('height', height);
});

这个jQuery代码可以重构吗？

3 个答案: