javascript - 无法从js中的 map 获取值(value)

Question

<div id="menu">
    <ul>
        <li><a href="/" id="main">Main</a></li>
    </ul>
</div>

<script type="text/javascript">

var main = new Object();
    main.menu_background_image = "url(images/main.png)";

function setMenuImages() {

    var menuListArray = $$('#menu li');
    var menuListArrayLength = menuListArray.length;

    for(var k = 0; k < menuListArrayLength; k++) {

        var listMenuId = menuListArray[k].getChildren('a').get('id');
        menuListArray[k].setStyle('background-image', listMenuId['menu_background_image']);

    }

}

</script>

当我调用 setMenuImages() 时，我无法从 map 中获取值，我不知道为什么 :(我用警报检查了它，它说“未定义”。我做错了什么？

Answer 1

嗯...

var listMenuId = menuListArray[k].getChildren('a').get('id');

这将有一个 ID 数组 - 如 ['foo','bar']; - 键为 0, 1, ……等

然后您尝试通过 listMenuId['menu_background'] 中不存在的键来引用它 - 这就是您从 对象 中检索属性的方式。

也不要执行 main = new Object(); - 参见 http://answers.oreilly.com/topic/2138-how-to-use-object-literals-in-javascript/ - 做:

var main = {
    menu_background_image: "url(images/main.png)"
};

看起来您想在所有找到的指向该链接的链接上实际设置背景图像属性:

$$('#menu li a').setStyle('background-image', main.menu_background_image);

这可以用上面的 1 个衬里来完成，但是如果你将 CSS/样式从你的 javascript 中取出并将它们放入它们所属的 .css 中不是更好吗？

如果你有多个，你可能会做类似的事情:

var tpl = 'url(images/{id}.png)';
// proper menu items image hash map based upon id as key
var menu = {
    main: 'someimage',
    other: 'otherimage'
};

$$('#menu li a').each(function(link){
    var id = link.get('id');
    link.setStyle('background-image', tpl.substitute({id: id}));
    // or read from an object like this with fallback
    link.setStyle('background-image', menu[id] || tpl.substitute({id: id})); 
});