Question

过去一周我一直在研究这个问题，我无法弄清楚为什么这不起作用。

我正在尝试使用外部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";
                }
        }
}

Answer 1

这就是为什么会发生这种情况 - 在创建事件处理程序之后，它们仍然引用elemImg变量。在循环结束时，该变量等于您设置的最后一项（第5个元素）。因此，稍后对elemImg执行的任何引用都将引用第5个元素。

以下是修复方法：在mouseout / mouseover函数中，使用“this.id”代替“elemImg.id”。

Answer 2

在您的代码中尝试使用this.id代替elemImg.id。

Javascript：getElementsByTag DOM，动态src引用

2 个答案: