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バックには、コールバックが登録されたときの値ではなく、常に最後に割り当てられた値があります。

修正方法に関する何百もの例 (多くはここにあります) については、「javascript ループ スコープ コールバック」を Google で検索してください。

編集 - @gabitzish が指摘するように、そのまま使用できますthis.id

これは、ブラウザーが現在の要素をthisコールバックとして渡すためにのみ機能します。

必要なループ変数は実際にはその要素のidであるため、直接使用することができ、ループ スコープの問題を心配する必要はありません。上記の答えは、要素のプロパティではない他の変数である場合に適用されます。

于 2012-04-27T12:53:17.267 に答える