我正在编写一个库,它在包装元素内创建多个元素,并将所有这些元素及其函数存储在 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/
最佳答案
您需要更改引用特定元素的方式来检索元素,而不是子节点。这将使它更加坚固。而且,当您这样做时,您也不需要在 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/
关于javascript - 如何将要附加图像的元素传递给 image.onload() 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9956765/