条件语句的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

回答

相关问题