Itération et récupération de variables

Tout d'abord bonjour tout le monde car c'est mon 1er message ici.
L'intitulé n'est pas forcément très clair et je m'en excuse.

Mon problème est le suivant, d'abord un exemple de code pour mieux comprendre :

J'ai un tableau de la façon suivante :

Code:

---

1 2 3 4 5 6

data = { div1 : "Txt 1", div2 : "Txt 2", div3 : "Txt 3" }

---

J'effectue l'itération suivante :

Code:

---

1 2 3 4 5 6

for (key in data) { div[key] = document.createElement("div"); div[key].innerHTLM = data[key]; div[key].onclick = function() { alert(key);} }

---

Et mon problème est le suivant, j'ai besoin d'éxécuter une fonction en fonction de "key", mais je viens de m'apercevoir du problème, c'est à dire qu'il éxécute cette fonction avec la dernière valeur de "key" ...

Je me suis creusé la tête et je n'ai pas réussi à résoudre ce problème, que d'ailleurs je suis persuadé que la solution est tout bête et que je n'y ai pas du tout pensé.

Si une personne pouvait me donner un coup de pouce !
Biensur, je reste à votre disposition si vous ne comprennez pas exactement quelque chose !
}

pourrais-tu nous dire ce que tu veux faire?
(nécessité du tableau initial, nécessité d'un tableau de variables, nature de l'objet html "div" ==> dont le nom est à changer...)...;

et surtout :tagcode:

Désolé je suis nouveau ! Pas tapper =)

C'est assez compliqué à expliquer c'est pour cela que j'ai juste utilisé un exemple. En gros je déclare un objet et dans cet objet je définis plusieurs tableaux (équivalent à data). Mon but est à partir d'une fonction de créer des calques "div" en fonction de ces tableaux déclaré.

Exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Modules.BookmarksInfos = { title : "Bookmarks", name : "Bookmarks", id : "bookmarks", template : "pod1", style : { float: "left", width: "200px" }, path : "js/modules/bookmarks.js", options : { add: "Ajouter", edit: "Edition" }}

---

J'ai utilisé div car en gros, j'aurais plusieurs calques, un peu dans la manière de "netvibes.com". Je définie dans chacun de ces calques un titre (title), une id (id), une class (template), un style spécifique si nécessaire (style), un fichier Js (path) a éxécuter contenant les instructions du Module, et les "outils" propres à chaques modules (options).

J'ai aucun problème pour le tout, jusqu'au moment ou je souhaite crée créer les éléments correspondants aux "outils" :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

divOptionsElm = new Object(); this.OptionsElm = new Object(); for (key in obj.options) { // obj qui correspond à Modules.BookmarksInfos par exemple divOptionsElm[key]= document.createElement("div"); this.OptionsElm[key] = divOptionsElm[key]; divOptionsElm[key].innerHTML = '<a href="#">'+ obj.options[key] +'</a>'; if (Browser.isIE) divOptionsElm[key].style.styleFloat = "left"; else if (Browser.isFF) divOptionsElm[key].style.cssFloat = "left"; divOptionsElm[key].onclick = function() { execOption(key); } }

---

Voilà en gros mon code. La fonction "execOption(key)" permet d'éxécuter la fonction correspondante à l'outil dans le fichier Js approprié que j'ai préalablement chargé.

Mais le problème est que quand on clique justement sur n'importe quel élément, "execOption(key)" prend la dernière valeur attribué à "key", dans notre exemple "edit".

C'est un peu plus clair ? :oops:

*** EDIT ***
J'ai édité mon message précédent pour les balises :>
Je suis un peu "débutant" dans le DOM et ce genre de choses, j'essai un peu de pousser et tester pas mal de choses pour voir à quelle sauce je pourrais l'utiliser.

up :(

Après plusieurs heure de casse tête, j'ai réussi à trouver une solution plus au moins louche.

J'ai défini lors de la création du div correspondant à "l'outil" un attribut "option' (div option=XXX) que je récupère de la façon suivante :

Code:

---

1 2	divOptionsElm[key].onclick = function() { execOption(this.option); }

---

Ce qui me permet donc d'obtenir le résultat que je souhaité.
Certes c'est un peu de la "magouille", mais je ne voyais pas d'autres solutions !