Pourquoi ce script mouseover ne fonctionne pas correctement?

Question

J'ai écrit ce script:

var elms = document.getElementsByTagName('li'); 

for (var i = 0; i < elms.length; i++){ 
    if (elms[i].className == 'liitem'){ 
    var delete_id = elms[i].id; 
    elms[i].onmouseover = function(){ 
    document.getElementById("delete-" + delete_id).style.display = "block"; 
    } 
    elms[i].onmouseout = function(){ 
    document.getElementById("delete-" + delete_id).style.display = "none"; 
    } 
    } 
}​ 

HTML:

<li class="liitem" id="205"> 
    <span> 
     <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">One:</a> </span> 
    <br> 
    <ul><li> 
     <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-205" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul> 
</li><br> 

<li class="liitem" id="204"> 
    <span> 
     <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">Two:</a> </span> 
    <br> 
    <ul><li> 
     <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-204" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul> 
</li><br> 

<li class="liitem" id="203"> 
    <span> 
     <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">Three:</a> </span> 
    <br> 
    <ul><li> 
     <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-203" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul> 
</li><br> 
​ 

démonstration en direct: http://jsfiddle.net/5FBjm/1/

mais il ne fonctionne pas correctement. Je veux que quand il y a mouseover sur un certain élément <li> de la classe "liitem", puis montrer le lien "delete" de cet élément (avec le même ID).

Dans mon script, n'apparaît que la dernière "suppression". Pourquoi?

Answer 1

Remplacer delete_id avec this.id et cela fonctionne: http://jsfiddle.net/5FBjm/4/

Answer 2

Vous avez un problème de portée variable - dans les rappels delete_id a toujours la dernière valeur affectée, pas la valeur qu'il avait lorsque le rappel a été enregistré.

Faites une recherche Google pour "javascript loop scope callback" pour centaines des exemples (beaucoup d'entre eux ici) sur la façon de le réparer.

---

EDIT - comme @gabitzish rappelle, vous pouvez simplement utiliser this.id

Cela ne fonctionne que parce que le navigateur passe l'élément courant comme this au rappel. Étant donné que la variable de boucle dont vous avez besoin est en fait id, vous pouvez l'utiliser directement et ne pas vous soucier du problème d'étendue de la boucle. La réponse ci-dessus s'appliquerait s'il s'agissait d'une autre variable qui n'est pas une propriété de l'élément.