1

私はこの1週間これに広範囲に取り組んできましたが、なぜこれが機能しないのか理解できません。

外部のJavaScriptファイルを使用してhtmlページのすべてのimgタグをプルし、ユーザーがマウスで画像にカーソルを合わせたときに画像を動的に（srcを変更して）交換しようとしています。ユーザーが画像にカーソルを合わせたときに画像を変更できますが、元に戻すと、正しい画像と調整されません（画像1、2、3、4はすべて画像5に変更されます）。

これがhtmlです。

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <script src="JS1.js" type="text/javascript" /></script> 
            <title>main</title>
            </head>

            <body>
                <div id="divCont"> 
                    <img src="images/button1_out.gif" id="button1" /> <br /> 
                    <img src="images/button2_out.gif" id="button2" /> <br /> 
                    <img src="images/button3_out.gif" id="button3" /> <br /> 
                    <img src="images/button4_out.gif" id="button4" /> <br /> 
                    <img src="images/button5_out.gif" id="button5" /> <br /> 
                </div> 
            </body>
            </html>

これがjavascriptです：

window.onload = function()
{
    var arrImgs = document.getElementsByTagName("img");
    for(var i = 0; i < arrImgs.length; i++)     {
            var elemImg = arrImgs[i]; 
            //alert(elemImg.id);

            elemImg.onmouseover = function()    {
                    //alert(this.src);
                    //var targetId = this.src;
                    this.src = "images/" + elemImg.id + "_over.gif";
                    //alert(this.src);
                }
            elemImg.onmouseout = function()     {
                    //alert(this.src);

                    this.src = "images/" + elemImg.id + "_out.gif";
                }
        }
}
4

2 に答える 2

1

これが発生する理由は次のとおりです。イベントハンドラーを作成した後も、それらはelemImg変数を参照します。ループの最後では、その変数は最後に設定したもの（5番目の要素）と同じです。したがって、後で実行されるelemImgへの参照は、5番目の要素を参照します。

修正方法は次のとおりです。mouseout/mouseover関数で、「elemImg.id」の代わりに「this.id」を使用します。

于 2012-04-19T15:02:55.020 に答える
0

コードthis.idでは、の代わりにを使用してみてくださいelemImg.id。

于 2012-04-19T15:02:41.727 に答える