關於調整大小和加載沒有複製/粘貼的jQuery函數

Question

我有以下一塊jQuery檢查加載時瀏覽器的寬度，並相應地運行。但爲了確保div在瀏覽器寬度更改時保持正確的大小，我在$(window).resize(function() {..});中放置了相同的代碼。

這看起來很奇怪，也不必要，所以我想知道如何將代碼放置一次，並讓它在.resize和加載時都運行。

var windowWidth = $(window).width(); 
if(windowWidth > 768 && windowWidth < 1223){ 
    $('.banner_image').show(); 
    $('.banner_image').height($('.banner .span3').height()); 
    $('.banner .span12 img').hide();    
} 
else { 
    $('.banner_image').hide(); 
    $('.banner .span12 img').show(); 
} 

$(window).resize(function() { 
var windowWidth = $(window).width(); 
    if(windowWidth > 768 && windowWidth < 1223){ 
     $('.banner_image').show(); 
     $('.banner_image').height($('.banner .span3').height()); 
     $('.banner .span12 img').hide();     
    } 
    else { 
     $('.banner_image').hide(); 
     $('.banner .span12 img').show(); 
    } 
}); 

Answer 1

可以綁定事件後觸發事件：

$(window).resize(function() { 
var windowWidth = $(window).width(); 
if(windowWidth > 768 && windowWidth < 1223){ 
    $('.banner_image').show(); 
    $('.banner_image').height($('.banner .span3').height()); 
    $('.banner .span12 img').hide();     
} 
else { 
    $('.banner_image').hide(); 
    $('.banner .span12 img').show(); 
}).resize();//resize to trigger on load 

Working Demo

Answer 2

功能只是存儲在一個變量，每次執行它要：

$(window).load(function() { 
    wFunc(); 
});  

$(window).resize(function() { 
    wFunc(); 
}); 

var wFunc = function() { 
    var windowWidth = $(window).width(); 
    if(windowWidth > 768 && windowWidth < 1223){ 
    $('.banner_image').show(); 
    $('.banner_image').height($('.banner .span3').height()); 
    $('.banner .span12 img').hide();    
    } 
    else { 
    $('.banner_image').hide(); 
    $('.banner .span12 img').show(); 
    } 
}