Question

我有一个调整页面缩略图大小的功能：

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，它向我显示在页面加载时，如果浏览器是全屏的（我的macbook pro上是1440宽），w = 335，但如果我移动它只是一个像素，它跃升至331.25，这是3.75px的差异。

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

我的脚本全部位于页面底部，所有内容都已准备就绪。

由于

Answer 1

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

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

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

Answer 2

一般情况下，我不会指定部分像素，而是预先对它们进行舍入。

在您的代码中发现了一个错误，但很可能与此无关。你总是在检查“＆lt;”和“＆gt;”如果窗口宽度恰好是900,1100,1680或2300像素

，则w将不确定

另一个注意事项：只计算$（window）.width（）一次并将其存储在变量中。没有必要（和沉重的）称它为8次（更糟糕的情况）

只是我的2美分

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

2 个答案: