0

重複の可能性：
Javascriptループ内のイベントハンドラー-クロージャが必要ですか？

li順序付けされていないリスト内の一連の要素にonclickイベントを単純に割り当てたいと思います。多くの一意のIDを定義し、各要素にイベントを手動で追加するという面倒な方法ではなく、プログラムでループliを使用して実行したいと思います。for

html：

<ul id="homeNav">
    <li><a title="Back to home page" href="">home</a></li>
    <li><a title="Play" href="">play</a></li>
    <li><a title="About the site?" href="">about</a></li>
    <li><a title="Latest development news and info." href="">dev blog</a></li>
    <div class="clear"></div>
</ul>

Javascript：

window.onload = function()
{
    var parentList = document.getElementById('homeNav');
    var listItems = parentList.getElementsByTagName('li');
    var numItems = listItems.length;
    for(var i = 0; i < numItems; i++)
    {
        listItems[i].onmouseover = function()
        {
            listItems[i].getElementsByTagName('a')[0].style.color = 'blue';
        }
        listItems[i].onmouseout = function()
        {
            listItems[i].getElementsByTagName('a')[0].style.color = '#cccccc';
        }
    }
}

エラーが発生しますlistItems[i] is undefined

i私には、イベントがトリガーに追加されたときに割り当てられた番号を使用するのではなく、イベントが文字通りインデックス変数を探しているように見えますか、またはi変数がクロージャのスコープ内にないのでしょうか？

4

3 に答える 3

4

変数はイベントで使用できません。使用できますthis。

for(var i = 0; i < numItems; i++)
{
    listItems[i].onmouseover = function()
    {
        this.getElementsByTagName('a')[0].style.color = 'blue';
    }
    listItems[i].onmouseout = function()
    {
        this.getElementsByTagName('a')[0].style.color = '#cccccc';
    }
}
于 2012-09-25T19:08:08.173 に答える
0

よくわかりませんが、考えて確認します

var listItems = parentList.getElementsByTagName('li');
listItems[i]

...あなたがそれをしているのかわかりません2）console.log（listItems）を実行してそれが何であるかを確認し、配列（オブジェクトの違い）について覚えておいてください。今のところこれですべてです。行かなければなりません...簡単な答えで申し訳ありませんが、お役に立てば幸いです。

于 2012-09-25T19:08:33.740 に答える
0

コードに問題があります。マウスオーバーまたはマウスアウトの場合、iの値はnumItemsに等しくなります。これらのイベントは、forループの終了後に呼び出されるためです。したがって、コンテキストを保存する必要があります。

function bindEvent(elem){

            elem.onmouseover = function()
            {
               elem.getElementsByTagName('a')[0].style.color = 'blue';
            }
            elem.onmouseout = function()
            {
               elem.getElementsByTagName('a')[0].style.color = '#cccccc';
            }
}

    window.onload = function()
    {
        var parentList = document.getElementById('homeNav');
        var listItems = parentList.getElementsByTagName('li');
        var numItems = listItems.length;
        for(var i = 0; i < numItems; i++)
        {
          bindEvent(listItems[i]);

        }
    }
于 2012-09-25T19:08:42.547 に答える