jQuery：如何访问外部变量？ [英] jQuery: how to access outside variable?

问题描述

我处于需要用这种方式解决的情况;需要将局部变量转换为全局变量。有一个示例返回图片的真实宽度和高度，我从 此答案发现了这些方法。 。

需要转换本地变量 pic_real_height 和 pic_real_width 返回全局变量并返回真实值。

>这是jsFiddle。

CSS：

  img {width：0px;高度：0像素; } 
  

jQuery：

  console.log（$（'。imgCon img'）。height（））; //返回0 
 
 var img = $（'。imgCon img'）[0 ]。 //获取我的img elem 
 var pic_real_width，pic_real_height; 
 $（'< img />'）。attr（'src'，$（img）.attr（'src'））。load（function（）{
 pic_real_width = this.width ; 
 pic_real_height = this.height; 
 
 console.log（pic_real_width +'x'+ pic_real_height）; 
 //  - 返回true 570x320  -  
} ）; 
 //问题从这里开始：
 console.log（pic_real_width +'x'+ pic_real_height）; 
 //返回未定义的
 //需要将其作为全局变量返回570x320 
  

解决方案

这一行，

console.log（pic_real_width +'x'+ pic_real_height）;

不会等待这些行

  pic_real_width = this.width; 
 pic_real_height = this.height; 
 
 console.log（pic_real_width +'x'+ pic_real_height）; 
 //  - 返回true 570x320  -  
  

来执行，因为它是异步的。

因此，
console.log（pic_real_width +'x'+ pic_real_height）; 在回调之前执行函数被调用（即在设置宽度和高度）之前。

既然你还没有定义它们，它们会显示 undefined 。

一个简单的解决方案是，

  $（'< img />'）。attr（'src'，$（img）.attr 'src'））。load（function（）{
 pic_real_width = this.width; 
 pic_real_height = this.height; 
 
 console.log（pic_real_width +'x'+ pic_real_height）; 
 //  - 返回true 570x320  -  
 restOfMyProcessing（）; 
 
}）; 
 
函数restOfMyProcessing（）{
 console.log（pic_real_width +'x'+ pic_real_height）; 
} 
  

I am in a situation that needs be solve with this way; need convert a local variable to a global variable. There is an example returning image's real width and height which i found these method from this answer..

Need to convert local varialbes pic_real_height and pic_real_width to global variables with returning their true values.

Here is jsFiddle.

CSS :

img { width:0px; height:0px; }​

jQuery :

console.log($('.imgCon img').height());//returns 0

var img = $('.imgCon img')[0]; // Get my img elem
var pic_real_width, pic_real_height;
$('<img/>').attr('src', $(img).attr('src')).load(function() {
        pic_real_width = this.width;   
        pic_real_height = this.height;

        console.log( pic_real_width + 'x' + pic_real_height );
        // -- returns true 570x320 --
});
//problem starts here:
console.log( pic_real_width + 'x' + pic_real_height );
//returns undefined
// need to return this as an global variable 570x320

解决方案

This line,

console.log( pic_real_width + 'x' + pic_real_height );

does not wait for these lines

    pic_real_width = this.width;   
    pic_real_height = this.height;

    console.log( pic_real_width + 'x' + pic_real_height );
    // -- returns true 570x320 -- 

to execute, because its asynchronous.

Thus, console.log( pic_real_width + 'x' + pic_real_height ); executes before callback function gets called (i.e. before you set the width and height ).

Since, you havent defined them already, they show undefined.

A trivial solution would be,

$('<img/>').attr('src', $(img).attr('src')).load(function() {
        pic_real_width = this.width;   
        pic_real_height = this.height;

        console.log( pic_real_width + 'x' + pic_real_height );
        // -- returns true 570x320 --
        restOfMyProcessing();

}); 

function restOfMyProcessing() {
    console.log( pic_real_width + 'x' + pic_real_height );
}

这篇关于jQuery：如何访问外部变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！