Question

我在javascript中使用for循环创建了一个简单的菜单，因为每个'tab'的大多数元素都是相同的，所以我使用for循环一次性完成。

我的问题是当我使用鼠标悬停在标签上时，如何使用onmouseover事件来更改标签的背景颜色。

示例：

TopValues = [ "130px", "163px", "196px" ];
MenuNames = [ "Home", "Articles", "Contact" ];
MenuItemLinks = [ "#", "#", "#" ];
MenuItemTitles = [ "Go To Home", "Go To Articles", "Go To Contact" ];

window.onload = function makeMenu() {
    for(var i=0; i<MenuNames.length; i++) {
        var menu = document.createElement('a');
        menu.text = MenuNames[i];
        menu.title = MenuItemTitles[i];
        menu.href = MenuItemLinks[i];
        document.body.appendChild(menu);

        menu.style.position = "fixed";
        menu.style.border = "1px solid red";
        menu.style.width = "90px";
        menu.style.top = TopValues[i];
        menu.style.left = "5px";
        menu.style.padding = "5px";
        menu.style.borderRadius = "5px";
        menu.style.textDecoration = "none";
        menu.style.background = "yellow";
        menu.style.color = "red";

    }
    menu.onmouseover = function() { menu.style.background = "orange"; };
    menu.onmouseout = function() { menu.style.background = "yellow"; };
}

在此示例中，只有最后一个选项卡会更改背景颜色。你能帮我理解我应该怎么做。

我想创建一个空数组，并为每个选项卡分配它的id，并使用另一个for循环和if语句来确定它是哪个选项卡，并更改它的颜色，但我没有管理。

谢谢大家

Answer 1

在循环内移动事件侦听器。

 for(var i=0; i<MenuNames.length; i++) {
        var menu = document.createElement('a');
        menu.text = MenuNames[i];
        menu.title = MenuItemTitles[i];
        menu.href = MenuItemLinks[i];
        document.body.appendChild(menu);

        menu.style.position = "fixed";
        menu.style.border = "1px solid red";
        menu.style.width = "90px";
        menu.style.top = TopValues[i];
        menu.style.left = "5px";
        menu.style.padding = "5px";
        menu.style.borderRadius = "5px";
        menu.style.textDecoration = "none";
        menu.style.background = "yellow";
        menu.style.color = "red";
        (function(el) {
            el.onmouseover = function() { el.style.background = "orange"; };
            el.onmouseout = function() { el.style.background = "yellow"; }
        }(menu));
    }

onmouseover用于使用for循环创建的菜单

1 个答案: