从一系列onMouseOver事件中创建一个循环

Creating a loop from a series of onMouseOver Events

本文关键字：一个 循环 创建 一系列 onMouseOver 事件      更新时间：2023-09-26

如何从这个函数中创建一个循环:

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

您面临的主要技术问题是您在循环中创建闭包。这些回调中的每一个都在相同的 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/

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

如果您希望它到达d44，那么将条件更改为:i <= 44或者改成I <45

顺便说一下，你不使用jQuery是有原因的，它的设计使这样的事情更容易，在几个方面。也许你列出了你真正想要用这段代码完成的东西，例如，它是一个菜单系统，还是我们可以建议更好的方法。

这里不需要JavaScript…使用: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);
    }  
}
相关文章：