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，这意味着当我44岁时它将退出循环，所以它将在d43停止。

如果您希望它到达d44，则将条件更改为：i＆lt; = 44 或者改为i＆lt; 45

顺便说一句，你有没有理由不使用jQuery它的设计可以通过多种方式使这样的事情变得更容易。也许您列出了使用此代码实际尝试完成的内容，例如它是菜单系统还是我们可以建议更好的方法。

Answer 3

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

但是，要回答你的问题：

请勿更改元素的ID。这似乎从根本上说是错误的。改为更改，添加或删除类。你想通过改变身份来实现什么目标？
不要跟踪id，只是直接跟踪元素引用。
最重要的是，当你进行循环时，在调用函数时，i的值为45， all 元素。通过将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);
    }  
}

从一系列onMouseOver事件创建循环

3 个答案: