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

Answer 1

嗯......

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

这将有一个ID的ARRAY - 例如['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})); 
});

无法从js中的地图获取价值

1 个答案: