2011-10-09 121 views
0

編輯:我把它放在文檔準備好的功能。 儘管圖像很大,文檔準備符合大圖像嗎? 你可以看到它不在這裏工作:http://syndex.mejQuery - 變量比較,只是不工作

這讓我安靜地瘋了。

var maxxxHeight = $(window).height(); 

$(".theImage").children('img').each(function() { 
    myHeight = $(this).height(); 
     if (myHeight > maxxxHeight){ 
     $(this).next().text("Browser " + maxxxHeight + " image height " + myHeight); 
    }; 
}); 

出於某種原因,

myHeight> maxxxHeight不會拿出anyhing。有些圖像的尺寸較大,有些則不是。圖像沒有被CSS設置。事實上,它們的寬度和高度在任何時候都沒有指定。

這怎麼可能?這是一個總的noob問題,但我完成了如果和以前的一百萬次。

謝謝

回答

2

我可以想到這可能發生的幾個原因。

  1. 圖像在代碼運行時可能尚未完全加載。
  2. 您的圖片可能不是您的課程的直接子元素。
  3. 您的代碼可能在文檔加載之前運行並且沒有與該類相匹配。

我最好的猜測是(1),在這種情況下,您應該爲圖像添加一個裝載處理程序,在圖像完成加載時執行所需操作。在文檔加載和圖像加載時運行代碼可能是爲了在應用圖像加載處理程序之前緩存圖像和加載事件。如果在文檔加載後動態替換圖像,則需要加載圖像。

注意:您應該在本地確定myHeight的範圍,以避免污染全局命名空間(以及由於範圍問題導致的潛在錯誤)。

$(document).load(function() { 
    var maxxxHeight = $(window).height(); 

    $(".theImage").children('img').each(function() { 
     $(this).load(function() { // only if images can be loaded dynamically 
      handleImageLoad(this); 
     }); 
     handleImageLoad(this); 
    }); 

    function handleImageLoad(img) 
    { 
     var $img = $(img), // declare local and cache jQuery for the argument 
      myHeight = $img.height(); 
     if (myHeight > maxxxHeight){ 
      // this is where your real code would go to make adjustments, etc. 
      $img.next().text("Browser " + maxxxHeight + " image height " + myHeight); 
     }; 
    } 
}); 
+0

我修復了這個var scope。我確實將圖像高度設置爲「0」。我只是不明白爲什麼會這樣。在我的CSS中,我現在有img的高度和寬度(如「auto」。 – RGBK

+0

@RGBK如果代碼運行時圖像尚未加載,則元素沒有高度。嘗試運行文檔加載代碼而不是文檔就緒。 '$(document).load(function(){...});' – tvanfosson

+0

好的,但實際上,我應該看看加載它的div的高度,這應該有一個想法,它會有多大如果它知道圖像會有多大?是不是他們的圖像的元數據沒有我必須指定它爲每個圖像,內聯或通過CSS? – RGBK

0

您需要做一些調試。由於比較失敗,通過將它們打印到控制檯來檢查myHeight和maxxxHeight的值。我保證其中的一個不是數字。實際上,其中一個可能是未定義的。

你是不是把你的jQuery代碼放在$(document).ready()調用中?