使用鼠標循環創建的菜單的onmouseover

Question

我使用javascript中的for循環創建了一個簡單的菜單，因為大多數元素對於每個“標簽”都是相同的，因此我使用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));
    }