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 函数中，使用“this.id”而不是“elemImg.id”。

于 2012-04-19T15:02:55.020 回答
0

在您的代码中尝试使用this.id而不是elemImg.id.

于 2012-04-19T15:02:41.727 回答