Question

我有以下代码：

function fn_get_natural_dim(){
    var width = this.width;
    var height = this.height;

    var ratiow = width/600;
    var ratioh = height/300;
    $("#output").append(img_name,",");

    if(ratiow>=ratioh)
        {
        height = height/ratiow;
        $(slide_image).css("width","600px");
        $(slide_image).css("height",height);
        var margin = (300-height)/2;
        $(slide_image).css("margin-top",margin);
        }
    else
        {
        width = width/ratioh;
        $(slide_image).css("width",width);
        $(slide_image).css("height","300px");
        var margin = (600-width)/2;
        $(slide_image).css("margin-left",margin);
        }
}
var max_count = $(".slider").children().length;
for(var count=1;count<=max_count;count++)
    {
    var count_string = count.toString();
    var img_name = "img" + count_string;
    var slide_image = document.getElementById(img_name);

    var img = new Image();
    img.onload = fn_get_natural_dim;
    img.src = $(slide_image).attr("src");
    }
});

对于每张图片（我现在有三张图片），即时通讯获取其自然尺寸，以便我可以计算出适合600x300 div所需的保证金。

但我只适用于最后一个，即第三个。换句话说，在#output中，它显示“img3，img3，img3”（由$（“＃output”）调用。append（img_name，“，”）;）我怎么让它显示“img1，img2，img3，”??

Answer 1

你可以这样做：

    img.onload = (function(img_name, slide_image) {
        return function() {fn_get_natural_dim(img_name, slide_image); };
    })(img_name, slide_image);

并更改fn_get_natural_dim以将图片名称作为参数：

function fn_get_natural_dim(img_name, slide_image) {

上面的代码捕获了闭包变量中img_name的每个连续值。

Answer 2

修改

巴马尔指出，这个解决方案并不完全正确。我会把它留下来，因为这是一个相当常见的错误，重要的是要注意他的解决方案和我自己的解决方案之间的区别。

将img_name传递到fn_get_natural_dim函数：

function fn_get_natural_dim( img_name ) { ... }

然后称之为：

img.onload = function() { fn_get_natural_dim(img_name); };

在js中的for循环内引用函数

2 个答案: