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

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>

I can't get value from map when I call setMenuImages() and I have no idea why :( I checked it with alert and it said "undefined". What i did wrong?

Answer 1

well...

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

this will have an ARRAY of ids - like ['foo','bar']; - with keys 0 , 1 , ... etc

you then try to reference it via a key that's not there of listMenuId['menu_background'] - which is how you'd retrieve a property from an object .

also don't do main = new Object(); - see http://answers.oreilly.com/topic/2138-how-to-use-object-literals-in-javascript/ - do:

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

looks like you want to actually set the background image property on all found links to that one:

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

This you can do with 1 liner above but wouldn't it be better if you kept CSS/styles out of your javascript and put them into .css where they belong?

if you have more than one you could potentially do something like:

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})); 
});