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 - 函數如何給出兩個不同的結果？

回答

相關問題