Question

通过一系列 onMouseOver 事件创建循环

2011-12-29

3555

javascript dom-events getelementbyid onmouseover

我如何创建此函数的循环：

window.onload = function makeHalo() {
    document.getElementById("d1").onmouseover = function() {
        this.id ="d1On";
        this.className="hover";
        document.getElementById("menu1").style.color="#6DC5E6";
    };
    document.getElementById("menu1").onmouseover = function() {
        this.style.color="#6DC5E6";
        document.getElementById("d1").className="hover";
        document.getElementById("d1").id="d1On";
    };
    
    document.getElementById("d1").onmouseout = function() {
        this.id ="d1";
        this.className="";
        document.getElementById("menu1").style.color="#FFFFFF";
    };
    document.getElementById("menu1").onmouseout = function() {
        this.style.color="#FFFFFF";
        document.getElementById("d1On").className="";
        document.getElementById("d1On").id="d1";
    };
    
    document.getElementById("d2").onmouseover = function() {
        this.id ="d2On";
        this.className="hover";
        document.getElementById("menu2").style.color="#6DC5E6";
    };
    document.getElementById("menu2").onmouseover = function() {
        this.style.color="#6DC5E6";
        document.getElementById("d2").className="hover";
        document.getElementById("d2").id="d2On";
    };
    
    document.getElementById("d2").onmouseout = function() {
        this.id ="d2";
        this.className="";
        document.getElementById("menu2").style.color="#FFFFFF";
    };
    document.getElementById("menu2").onmouseout = function() {
        this.style.color="#FFFFFF";
        document.getElementById("d2On").className="";
        document.getElementById("d2On").id="d2";
    };
}

此函数在图像悬停时学习图像的 ID，更改该元素的 ID，向元素添加类，并更改另一个元素的颜色

第二部分在列表项悬停时学习列表项的 ID，更改其颜色，并更改其他图像元素的 ID 并向该元素添加类。

onmouseout 只是重置所有内容。

在实际的 HTML 页面上，它是一个带有列表的菜单页面。下面是大陆地图，它是背景图像。当您将鼠标悬停在列表项上时，它会将地图上的一个点与另一张图片交换以作为指示器。您还可以将鼠标悬停在地图上的点上以更改列表上链接的颜色。

我尝试过做这样的事情，但循环只针对某些元素进行最后一次迭代。链接可以正常改变颜色，但无论我将鼠标悬停在哪个链接上，它只会将图片交换为“d43”。

window.onload = function makeHalo() {
    var i = 1;
    for (i=1; i<44; i++) {
        var menu = "menu"+i;
        var d = "d"+i;
        var On = "d"+i+"On";
        document.getElementById(d).onmouseover = function() {
            this.id = On;
            this.className="hover";
            document.getElementById(menu).style.color="#6DC5E6";
        };
        document.getElementById(menu).onmouseover = function() {
            this.style.color="#6DC5E6";
            document.getElementById(d).className="hover";
            document.getElementById(d).id=On;
        };

        document.getElementById(d).onmouseout = function() {
            this.id = d;
            this.className="";
            document.getElementById(menu).style.color="#FFFFFF";
        };
        document.getElementById(menu).onmouseout = function() {
            this.style.color="#FFFFFF";
            document.getElementById(On).className="";
            document.getElementById(On).id=d;
        };
    }
}

任何帮助都将不胜感激。

Answer 1

您面临的主要技术问题是您在循环中创建闭包。这些回调中的每一个都关闭在 相同的 i 变量上，该变量的值对于每个回调都是相同的（最后一次迭代后的值）。通过将循环主体包装在其自己的函数中来解决此问题，该函数接收 i 作为参数，从而在每次迭代时创建本地副本。

此外，还存在许多样式和性能问题：

这些回调的主体在许多情况下完全相同（ mouseover 和 mouseout 对最终在每个块中执行相同的工作）。
您正在通过 ID 重复检索相同的元素。这是不必要的；您应该保存一个引用。
您正在通过更改元素的 ID 来识别元素的状态。这通常不是您想要处理这种情况的方式。ID 不应更改。

我会更像这样写（解决闭包问题和上面的前两个项目（不解决 ID 问题））：

for (var i = 1; i <= 2; i++) {
    (function(i) {
        var d = document.getElementById("d" + i);
        var menu = document.getElementById("menu" + i);
        d.onmouseover = menu.onmouseover = function() { 
            d.id = "d" + i + "On"; 
            d.className = "hover";
            menu.style.color = "#6DC5E6";
        };
        d.onmouseout = menu.onmouseout = function() { 
            d.id = "d" + i; 
            d.className = "";
            menu.style.color = "#FFFFFF";
        };
    })(i);
}

这只处理两个元素；只需更改循环最大值即可使其适用于更多元素。

您可以在此处查看工作演示：

http://jsfiddle.net/ezYtq/

Answer 2

HTML 中的最后一个 div 是“d43”还是“d44”？您的循环将从 d1 运行到 d43，因为 i<44，这意味着当 i 为 44 时，它将退出循环，因此它将在 d43 处停止。

如果您希望它到达 d44，则将条件更改为：i <= 44 或将其更改为 i < 45

顺便说一句，您不使用 jQuery 是有原因的，它的设计使这类事情在多个方面变得更容易。也许您列出了您实际尝试使用此代码实现的目标，例如它是菜单系统还是我们可以建议更好方法的东西。

Answer 3

这里不需要 JavaScript... 只需使用 CSS :hover 伪类即可。

但是，回答您的问题：

不要更改元素的 id。这似乎从根本上就是错误的。改为更改、添加或删除类。更改 id 的目的是什么？
不要跟踪 id，直接跟踪元素引用即可。
最重要的是， 当您执行循环时，在调用函数时，对于所有元素， i 的值为 45 。通过将 i 传递给创建事件处理程序的函数来解决这个问题：

window.onload = function makeHalo() {  
    for (var i = 1; i < 44; i++) {
        (function (i) {
            var menu = document.getElementById("menu" + i);
            var d = document.getElementById("d" + i);
            function over () {
                d.className = "hover";  
                menu.style.color = "#6DC5E6";  
            }
            d.onmouseover = over;
            menu.onmouseover = over;

            function out () {  
                d.className = "";  
                menu.style.color = "#FFFFFF";  
            }
            d.onmouseout = out;
            menu.onmouseout = out;
        })(i);
    }  
}