1 
<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() 时，我无法从地图中获取价值，我不知道为什么:( 我用警报检查了它，它说“未定义”。我做错了什么？

4

1 回答 1

3

出色地...

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

这将有一个 ids 的数组 - 像['foo','bar'];- 带有键0, 1, ... 等

然后，您尝试通过一个不存在的键来引用它listMenuId['menu_background']——这就是您从object.

也不要这样做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})); 
});
于 2013-10-16T11:12:22.740 回答