Question

我正在创建带有图标的菜单，并使用javascript对用户的鼠标做出反应，例如CSS中的“：hover”伪元素。首先，我尝试使用此代码：

var hmpg_link = document.getElementById("homepage_link"),
hmpg_pic = document.getElementById("homepage_pic");

hmpg_link.onmouseenter = function () {
    hmpg_pic.src = "images/menu/active/homepage.png";
};   

hmpg_link.onmouseenter = function () {
    hmpg_pic.src = "images/menu/active/homepage.png";
};

它奏效了！但是因为我有很多菜单项，所以我试图使这一过程自动化并编写了这段代码。

var hmpg = {"link": document.getElementById("homepage_link"),
    "img": document.getElementById("homepage_pic")},
names = {hmpg: "homepage"},
path = "images/menu/";

Object.keys(names).forEach(function (item) {
    item["link"].onmouseenter = function () {
        item["img"].src = path + "active/" + names[item] + ".png";
    };

    item["link"].onmouseleave = function () {
        item["img"].src = path + "normal/" + names[item] + ".png";
    };
});

此代码不起作用。浏览器控制台没有任何错误，菜单中的图像没有变化。

Answer 1

似乎您是根据自己的值动态选择对象。循环思考Object.keys(names)将为您提供hmpg的{{1}}值的item，并使用该forEach()来尝试访问属性item和link，即img和item['link']，这是不正确的，会引发错误。

但是，要实现将item['img']对象嵌套在另一个对象（例如hmpg）中，则除了访问mapObj和{{1 }}值。这次将是link和img。这样，它将为您工作。

mapObj[item]['link']

Object.keys（）。forEach（）不起作用

1 个答案: