Показать сообщение отдельно
  #2 (permalink)  
Старый 02.06.2014, 03:09
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

Обычное решение:
var components = {};
 
function func(inputData) {
    function click(ev){ //вынесем функцию отдельно, дабы не создавать новую на каждый элемент
            ddd[this.id].text = "hello";
    }     
    for (var i=0; i<5; i++) {
        var data = inputData["d"+i]; //component = components[i+""] - бессмыслено ибо == undefined
             
        components[i] = document.createElement("div"); //ключи всегда приводятся к строке, i+"" - не имеет смысла
        components[i].appendChild( document.createTextNode(data.text) ); //.innerText - не кроссбраузерно, в ff алалог .textContent
        components[i].id = 'd' + i; //проще всего хранить нужную для связи инфу в атрибутах
        components[i].onclick = click;
    }
     
}
 
var ddd = {
    d0: {text: "0"},
    d1: {text: "1"},
    d2: {text: "2"},
    d3: {text: "3"},
    d4: {text: "4"}
}
func(ddd);


Но если таки не хочется использовать атрибуты, и не волнует создание множества копий функций, то решение "проблемы" - классический вариант замыкания:
var components = {};
 
function func(inputData) { 
    for (var i=0; i<5; i++) {
        var data = inputData["d"+i]; //component = components[i+""] - бессмыслено ибо == undefined
             
        components[i] = document.createElement("div"); //ключи всегда приводятся к строке, i+"" - не имеет смысла
        components[i].appendChild( document.createTextNode(data.text) ); //.innerText - не кроссбраузерно, в ff алалог .textContent
        components[i].onclick = function(innerData){
            return function(){
                innerData.text = "hello";
            }
        }(data) //создаём и тут же вызываем функцию, передавая в неё нужный объект(это работает по той же причине по которой не работает ваш пример: функция "замыкает" на себя все переменные, а не их значения на момент создания)
    }
     
}
 
var ddd = {
    d0: {text: "0"},
    d1: {text: "1"},
    d2: {text: "2"},
    d3: {text: "3"},
    d4: {text: "4"}
}
func(ddd);
__________________
29375, 35

Последний раз редактировалось Aetae, 02.06.2014 в 14:00.
Ответить с цитированием