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();
   }
}

调整大小和加载时的jQuery函数，无需复制/粘贴

2 个答案: