从一系列onMouseOver事件创建循环 [英] Creating a loop from a series of onMouseOver Events

问题描述

如何创建此函数的循环。

how can I create a loop out of this function.

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，向元素添加一个类，并更改另一个元素的颜色

The function pretty much learns the ID of an image when its hovered, changes the ID of that element, adds a class to the element, and changes the color of another element

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

The second part learns the ID of a list item when its hovered, changes its color, and changes the ID of the other image element and adds a class to that element as well.

onmouseout只是重置一切。

The onmouseout simply resets everything.

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

On the actual HTML page, it is a menu page with lists. Below there a continent map, which is a background image. When you hover over a list item, it swaps out a point on a map with another picture for an indicator. You can also hover the points on the map to change the color of the links on the lists.

我尝试过这样的事情，但循环只进入某些元素的最后一次迭代。链接改变颜色很好，但它只会交换图片d43，无论我将鼠标悬停在哪个链接上。

I tried doing something like this, but the loop only goes to the last iteration for some of the elements. The links change color fine, but it will only swap the picture for "d43" regardless of what link I hover over.

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

任何帮助将不胜感激。

Any help will be greatly appreciated.

谢谢。

推荐答案

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

The primary technical issue you're facing is that you're creating closures in a loop. Each one of those callbacks closes over the same i variable, whose value will be the same for each of the callbacks (its value after the final iteration). This is fixed by wrapping the body of the loop in its own function that receives i as an argument, thus creating a local copy on each iteration.

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

There are a number of style and performance issues, as well:

• 这些回调的主体位于许多情况完全相同（ mouseover 和 mouseout 对最终会在每个块中执行相同的工作）。


• 您正在按ID重复检索相同的元素。这是不必要的;你应该保存一个引用。


• 你通过改变它的ID来识别元素的状态。这通常不是您想要处理的方式。 ID不应该更改。

• The bodies of those callbacks are in many cases exactly the same (the mouseover and mouseout pairs end up dong the same work in each block).
• You're retrieving the same elements by ID repeatedly. This is unnecessary; you should save a reference.
• You're identifying the state of an element by changing its ID. This isn't generally how you want to handle this. An ID shouldn't change.

我会更喜欢这样写（解决关闭问题和上面的前两个项目符号（不解决ID问题））：

I would write it more like this (addressing the closure issue and the first two bullet items above (not addressing the ID problem)):

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

这只处理两个元素;只需更改循环最大值以使其更有用。

This handles just two elements; simply change the loop max to make it work for more.

您可以在此处看到一个有效的演示：

You can see a working demo here:

• http://jsfiddle.net/ezYtq/

• http://jsfiddle.net/ezYtq/

这篇关于从一系列onMouseOver事件创建循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！