Jquery - 函数如何给出两个不同的结果？

我有重新调整页面上的缩略图功能：Jquery - 函数如何给出两个不同的结果？

function adjustThumbs(){ 
if ($(window).width()<900) { 
    var w = ($("#wrapper").width())/2; 
} 
else if ($(window).width()>900 && $(window).width()<1100){ 
    var w = ($("#wrapper").width())/3; 
} 
else if ($(window).width()>1100 && $(window).width()<1680){ 
var w = ($("#wrapper").width())/4; 
} 
else if ($(window).width()>1680 && $(window).width()<2300){ 
var w = ($("#wrapper").width())/5; 
} 
else if ($(window).width()>2300){ 
var w = ($("#wrapper").width())/6; 
} 
$(".tableMaker, .imgContainer").each(function(){ $(this).css("width", w); }); 
$(".debug").text("debug = "+w); 
}

一旦页面加载，我火的功能。

它没有做它应该做的。

但在调整大小，它呢？

Here is the test page

我在页面的顶部中间调试DIV这让我发现，页面上的负载，如果浏览器是全屏幕（1440我的MacBook Pro宽），W = 335，但如果我把它移动一个像素，它跳到331.25，这是一个3.75px的差异。

问题是...当我第二次调用该函数时，它确实有效...所以为什么它不能第一次工作？

我的脚本都在页面的底部，一切都在文档准备就绪。

感谢

来源

2011-03-30 RGBK

也许差异是正在加载的页面和准备好的页面之间的差异。它也可能是一个浏览器问题，因为第一个函数在文档准备就绪和我之后调整像素的大小之间的差异很好。 – Marcel 2011-03-30 00:44:34

我认为你已经更好地解释了这个问题。问题是，人们如何规避这种情况，或者是在调整窗口大小时重新调整行为的“假”？ – RGBK 2011-03-30 00:48:25

'$（window）.resize（function（）{adjustThumbs（）}）。resize（）;' – Marcel 2011-03-30 00:49:40

也许差异是和是准备页是在页面之间的差别加载。它也可能是一个浏览器问题，因为在document ready上运行的第一个函数与我之后调整像素大小的差别很好。

您应该尝试触发窗口大小调整事件，而不是调用函数内联。要触发调整大小事件，您可以在绑定事件之后对其进行标记，如下所示：

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

来源

2011-03-30 20:40:22 Marcel

一般我不会分配部分像素，但是反过来他们事前。

在您的代码中发现了一个错误，但最有可能不相关。你总是检查“<”和“>”，所以当窗口宽度恰好为900,1100,1680或2300像素时，w将是不确定的

另一个注意：计算$（window）.width（）只有一次并将其存储在一个变量中。这是没有必要的（重）来调用它的8倍（情况更糟）

只是我的2美分

来源

2011-03-30 01:15:24 roberkules

Jquery - 函数如何给出两个不同的结果？

回答

相关问题