Как передать элемент для добавления изображения в функцию image.onload()

Question

Я пишу библиотеку, которая создает несколько элементов внутри элемента оболочки и сохраняет все это и свои функции внутри объекта JavaScript. Я пытаюсь избежать идентификаторов, поскольку на странице могут быть несколько экземпляров этого объекта. У меня есть функция, позволяющая пользователю изменять некоторые элементы, и мне нужна помощь в том, как добавить изображение.

Вот функция:

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. Это сделает его намного более надежным. И, когда вы это сделаете, вам не понадобится ссылка 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 индексов. Это делает его нечувствительным к тому, где текстовые узлы являются и является намного более надежным способом обращения к элементам, которые вы хотите настроить и изменить.

Вы можете увидеть его работы здесь: http://jsfiddle.net/jfriend00/kkXCg/