javascript - 无需复制/粘贴即可调整大小和加载的 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

绑定(bind)事件后即可触发事件:

$(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