如何傳遞元素以將圖像追加到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

你需要改變你引用特定元素來檢索元素，不是的childNodes的方式。這將使它更加健壯。而且，當你這樣做時，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/