0

私は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);
});
4

3 に答える 3

3 
// 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);

一部のブラウザはウィンドウのサイズ変更時に多くのイベントハンドラを起動するため、サイズ変更イベントのイベントハンドラを「調整」することも検討する必要があります。underscore.jsを使用すると、次のようになります。

$(window).load(resizeBackground).resize( _.throttle(resizeBackground, 100) );
于 2012-06-15T13:31:43.533 に答える
1 
$(window).on("load resize",function() {
var height = $('#display-area').height();
$('.skin-background')
    .css({'display':'block','height':height});
});
于 2012-06-15T13:27:59.280 に答える
1

単一のセレクターを使用して両方のイベントを追加し、このように複数の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);
});
于 2012-06-15T13:30:32.663 に答える