0

我写了这个脚本：

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）。

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

4

2 回答 2

3

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

于 2012-04-27T12:53:49.327 回答
2

您有一个变量范围问题 - 在回调中delete_id始终分配最后一个值，而不是注册回调时的值。

在 Google 上搜索“javascript 循环范围回调”，了解如何修复它的数百个示例（其中很多在这里）。

编辑 - 正如@gabitzish 指出的那样，您可以使用this.id

这仅适用于浏览器将当前元素作为this回调传递。

由于您需要的循环变量实际上是该元素的id，因此您可以直接使用它而不必担心循环范围问题。如果它是不是元素属性的其他变量，则上面的答案将适用。

于 2012-04-27T12:53:17.267 回答