我写了这个脚本:
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)。
相反,在我的脚本中,只出现最后一个“删除”。为什么?