【问题标题】:function inside for loop (js/jquery)for循环内的函数(js / jquery)
【发布时间】:2013-07-24 11:20:45
【问题描述】:

我在 for 循环中调用了一个函数,但该函数似乎无法正常工作

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

    var ratiow = width/600;
    var ratioh = height/300;
    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");
    }
});

在我的 HTML 中,我有几个 ID 为 #img1、#img2 等的图像。 对于它们中的每一个,我通过调用 new Image() 来获得其自然尺寸,然后调整其大小以适应 600x300 div。 以上是函数 fn_get_natural_dim() 的内部

当我在 for 循环中调用此函数时,它不起作用。具体来说,宽度和高度变量结果为零。起初我以为函数中的“this”不再指向img变量,所以我将“this”切换为“img”,但它仍然不起作用。

【问题讨论】:

  • img.onload = fn_get_natural_dim();将使用此函数的返回结果,该结果似乎是“未定义”。查看@Alnitak 的回答

标签: javascript jquery function for-loop


【解决方案1】:

您正在 调用 fn_get_natural_dim,而您应该传递一个引用给它:

img.onload = fn_get_natural_dim;

可能还有其他问题,但这个是杀手锏。

【讨论】:

  • 这就是我想要的!但由于某种原因,还有另一个问题。出于某种原因,更改 $(slide_image) 的边距仅适用于最后一张图像(在我的情况下是 #img3),所以换句话说,如果我写 $("#output").append(img_name,", ") 在函数 fn_get_natural_dim 中,它只显示 "img3,img3,img3"
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-05
  • 1970-01-01
  • 1970-01-01
  • 2019-04-07
相关资源
最近更新 更多