从一系列 onMouseOver 事件创建循环

Question

我怎样才能从这个函数中创建一个循环：

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);
    }  
}