條件語句的JQuery

這裏的人一些幫助，我已經能夠用下面的代碼來獲得圖像的原始寬度：條件語句的JQuery

var img = new Image(); 

     img.onload = function() { 
      var W2 = this.width; 
      alert(W2); 
     } 

     img.src = document.getElementById('imageViewerImg').src;

現在我有一個圖像的寬度，我需要一個條件語句來修改CSS，如果圖片寬於700px。

我的代碼要做到這一點是這樣的：

$(document).ready(function(){ 
     var img = new Image(); 

     img.onload = function() { 
      var W2 = this.width; 
     } 

     img.src = document.getElementById('imageViewerImg').src; 

     if($W2 > 700) { 
      $("#photoHolder").css({"vertical-align":"none","text-align:":"none"}); 
     } 
    });

但是，這是行不通的。我試圖在條件語句中添加一個警告框，所以如果圖片碰巧比700px寬，它應該會出現並通知。此警報框也不會顯示。即使我把警告框if語句之外，只是把在下面，它不會工作，像這樣：

$(document).ready(function(){ 
      var img = new Image(); 

      img.onload = function() { 
       var W2 = this.width; 
      } 

      img.src = document.getElementById('imageViewerImg').src; 

      alert(W2) 
     });

應該在哪裏我把我如果在這個代碼語句，使其工作？

來源

2013-07-23 user2611052

我剛纔不是回答這個問題 - > http://stackoverflow.com/questions/17813535/simple-jquery-script-working-on-jsfiddle-not-on -my-site/17813800＃comment25993843_17813800 – adeneo

http://jsfiddle.net/vXgRm/1/這個例子有幫助嗎？只是製作了一些'div'來顯示獲取寬度並在條件中使用它。 – defaultNINJA

你有一個範圍問題：

$(document).ready(function(){ 
     var img = new Image(); 
     var W2; 
     img.onload = function() { 
      W2 = this.width; 
     } 

     img.src = document.getElementById('imageViewerImg').src; 

     alert(W2); 

     if($W2 > 700) { 
      $("#photoHolder").css({"vertical-align":"none","text-align:":"none"}); 
     } 
    });

您需要定義W2您的if語句可以訪問它。

或者

更重要的是，你可以把你的if語句在onload事件處理程序：

$(document).ready(function(){ 
    var img = new Image(); 

    img.onload = function() { 
     var W2 = this.width; 
     if($W2 > 700) { 
      $("#photoHolder").css({"vertical-align":"none","text-align:":"none"}); 
     } 
    } 

    img.src = document.getElementById('imageViewerImg').src; 
});

來源

2013-07-23 15:17:21 marteljn

我真的不知道什麼是範圍問題，但是當我複製並粘貼代碼時，警告框會顯示一條消息'未定義'，而我所需要的結果不會顯示，我認爲您將問題顯示給我。你能幫我解決範圍問題嗎？ – user2611052

如果您在onload事件處理函數內定義了'W2'，則外部上下文不能訪問它。我編輯了我的答案，將你的代碼放入onload事件處理程序中。 – marteljn

你的代碼段不工作:( – user2611052

移動你if邏輯onload內的圖像，像這樣：

$(document).ready(function(){ 
    var img = new Image(); 

    img.onload = function() { 
     var W2 = this.width; 
     if(W2 > 700) { 
      $("#photoHolder").css({"vertical-align":"none","text-align:":"none"}); 
     } 
    } 

    img.src = document.getElementById('imageViewerImg').src; 
});

注：JavaScript使用嵌套作用域，所以當您在image.onload的內部定義了W2，但在您最初擁有if邏輯的位置不可用。

來源

2013-07-23 15:20:15

這不起作用。我在if語句中添加了一個警告框，但它不會顯示。我一直有同樣的問題。 – user2611052

刪除'W2'前面的'$'，回答更新。您不需要將'W2'作爲jQuery包裝集合，因爲它不是一個。 –

好的，這工作謝謝！ – user2611052

正如你使用jQuery，保持這樣的一切。不要混淆正規的Javascript DOM操作。而您的變量需要在代碼中可見的範圍內定義。

$(function() { 
    var img = new Image(); 
    var W2 = 0; 

    $(img).on("load", function() { 
     W2 = $(this).width; 
    }); 

    $(img).attr("src", $("#imageViewerImg").attr("src"); 

    if (W2 > 700) { 
     $("#photoHolder").css({"vertical-align":"none","text-align:":"none"}); 
    } 
});

來源

2013-07-23 15:20:56 melancia

由於您使用的是jQuery，因此您可以使用width（）函數而無需定義新的圖像。例如：

<img src="http://bunkerhill.com/images/bh_commander.jpg" alt="Battle Cry"/> 
$(function() { 
    var w2=$("img").width(); 
    alert(w2); 
    if (parseInt(w2)>700) { 
     //do something 
    } 
});

jsfiddle

來源

2013-07-23 15:26:51

我已經添加了您的代碼，是的，它可以在JSfiddle上運行，但是當我將它放在我的網站上時，文檔就緒功能中，警告框顯示消息'0'。 – user2611052

你如何引用圖像？在標籤內？ –

條件語句的JQuery

回答

相關問題