イメージを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; 
} 

あなたは残念ながら、.onload関数の内部で、thisは、画像要素そのものを指しますfoo.rebrand('hello', 'world', 'example.png')

を呼び出します。ですから、どうすれば画像のロードにthis.branding.childNodes[0]を渡すことができますか？

私はそうのような機能を記述する場合：

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

そしてanythingはちょうどonloadイベントへの参照になります。

編集jsFiddleを追加する：あなたは、あなたが要素、ないのchildNodesを取得するために、特定の要素を参照する方法を変更する必要が http://jsfiddle.net/KtJd6/

Answer 1

。これにより、より堅牢になります。そして、あなたがそうするときには、参照thisがonloadハンドラに必要ないでしょう。

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インデックスを指示するために参照するじゃないことに注意してください。これは、テキストノードがどこにあるかに影響されず、ターゲットとしたい要素を参照するロバストな方法です。