javascript - 为什么这个鼠标悬停脚本不能正常工作？

Question

我写了这个脚本:

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>
​

现场演示:http://jsfiddle.net/5FBjm/1/

但是它不能正常工作。 我希望当鼠标悬停在某个 <li> 上时“liitem”类的元素， 然后显示该元素的“删除”链接(具有相同的 ID)。

在我的脚本中，只出现最后一个“删除”。为什么？

Answer 1

将delete_id替换为this.id，它可以工作:http://jsfiddle.net/5FBjm/4/