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/

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

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

Answer 1

将delete_id替换为this.id，并且有效：http://jsfiddle.net/5FBjm/4/

Answer 2

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

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

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

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

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

为什么这个鼠标悬停脚本无法正常工作？

2 个答案: