2008-12-10 14 views
1

Je voudrais savoir comment je peux faire référence à un objet élément de la liste si j'avais par exemple la liste html suivantréférence à un objet d'élément de liste html correctement en javascript pour l'enregistrement de l'événement

<div id="subdiv_2"> 
<div id="subdiv_3"> 
    <ul> 
    <li><a href="">Item1</a></li> 
    <li><a href="">Item2</a></li> 
    <li><a href="">Item3</a></li>  
    </ul> 
</div> 
</div> 

Comment est-il possible d'enregistrer un onclick à la li Item2 sans qu'il ait d'avoir une elementId unique, par exemple, je peux le faire pour subdiv_3 parce qu'il a un identifiant unique et pas dans la liste par

document.getElementById('subdiv_3').addEventListener('click', function();, false); 

Mon but ultime est de affecter une fonction à chaque objet de la liste, pour le nombre de la liste des objets avec des paramètres uniques en fonction du nombre d'objets liste par exemple:

for(i=0;i<list.length;i++){ 
"document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);"; 
} 

Répondre

2

Vous pouvez obtenir tous les éléments enfants de subdiv_3 qui sont <li>. Puis parcourez cette boucle en ajoutant les fonctions au fur et à mesure. En regardant votre exemple de code, lorsque vous êtes dans la boucle en créant vos fonctions, vous pouvez rencontrer des problèmes de portée de fermeture. (Toutes les fonctions sembleront utiliser la même valeur de i.) Vérifiez ma réponse à cette question pour traiter ce problème: How to Add Event Handler with Arguments to an Array of Elements in Javascript?

+0

Parfait! Merci :) Si Stackoverflow me laisse upvote je le ferais :) – Supernovah

0

En reponse au commentaire sur Benry's Answer By Benry, Après avoir utilisé son code, le suivant prouve que chaque elementLi peut être appelé avec els [i]

function attachToList(){ 
div = document.getElementById('menu2'); 
els = div.getElementsByTagName('li'); 
for (var i=0, len=els.length; i<len; i++) { 
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i)); 
} 
} 
1

@Supernovah: Vous pouvez effectivement affecter une fonction réelle à setTimeot(). Cela vous débarrasse de la mise en forme des chaînes, ce qui vous empêchera de faire des choses plus complexes que de simplement définir une propriété.

Voici le code:

function attachToList() { 
    var div = document.getElementById('menu2'); 
    var els = div.getElementsByTagName('li'); 
    // create a closure returning an anonymous inner function 
    var fn = function(li) { 
    return function() { 
     li.style.backgroundColor = "#FFFFCC"; 
    }; 
    }; 
    for (var i=0, len=els.length; i<len; i++) { 
    // create function instance suitable for current iteration 
    var changeLi = fn(els[i]); 
    // pass function reference to setTimeout() 
    setTimeout(changeLi, 250*i); 
    } 
} 

Et une brève explication:

En utilisant une fermeture est le truc qui fait que lorsque setTimeout() déclencheurs, toutes les variables ont toujours les valeurs attendues.

Pour ce faire, vous écrivez une fonction qui renvoie une fonction. La fonction externe prend des paramètres, la fonction interne ne le fait pas. Mais fait référence aux paramètres de la fonction externe. Dans la boucle, vous appelez la fonction externe (avec les paramètres corrects) et obtenez une toute nouvelle fonction interne à chaque fois, chacun ayant sa propre version des valeurs de paramètre. C'est celui que vous affectez à setTimeout().

+0

Merci pour cela, je l'ai aussi compris dans l'autre post de Benry. – Supernovah

+0

Aussi je pense que l'utilisation de la fonction de retour() ... provoque un problème de fermeture en passant la variable en bas de la chaîne. Sans imbriquer cette fonction, au lieu de cela dans son parent, votre idée fonctionne bien. – Supernovah