javascript - 如何将要附加图像的元素传递给 image.onload() 函数

Question

我正在编写一个库，它在包装元素内创建多个元素，并将所有这些元素及其函数存储在 JavaScript 对象内。我试图避免使用 ID，因为页面上可能有该对象的多个实例。我有一个功能允许用户更改某些元素，并且我需要帮助弄清楚如何附加图像。

这是函数:

foo.prototype.rebrand = function(line1, line2, imgUrl){
    this.branding.childNodes[1].innerHTML = line1;
    this.branding.childNodes[2].innerHTML = line2;
    var brandImage = document.createElement('img');
    brandImage.onload = function(){
        this.branding.childNodes[0].appendChild(brandImage);
                    //this won't work
    }
    brandImage.src = imgUrl;
}

您可以调用foo.rebrand('hello', 'world', 'example.png')

不幸的是，在 .onload 函数中，this 将引用图像元素本身。那么，如何将 this.branding.childNodes[0] 传递到图像加载中？

如果我像这样编写函数:

            brandImage.onload = function(anything){
        this.branding.childNodes[0].appendChild(brandImage);
                    //this won't work
    }

那么anything将只是对onload事件的引用。

编辑以添加 jsFiddle: http://jsfiddle.net/KtJd6/

Answer 1

您需要更改引用特定元素的方式来检索元素，而不是子节点。这将使它更加坚固。而且，当您这样做时，您也不需要在 onload 处理程序中引用 this。

foo.prototype.rebrand = function(line1, line2, imgUrl){
    var brandImage = document.createElement('img');

    // find child divs
    var divs = this.branding.getElementsByTagName("div");
    divs[0].innerHTML = line1;
    divs[1].innerHTML = line2;

    brandImage.onload = function(){
        divs[0].appendChild(brandImage);
    };
    brandImage.src = imgUrl;
};

请注意，我使用 getElementsByTagName() 获取元素，而不是引用直接 childNode 索引。这使得它对文本节点的位置不敏感，并且是引用您想要定位和修改的元素的更可靠的方式。

您可以在这里看到它的工作原理:http://jsfiddle.net/jfriend00/kkXCg/