How to access an object using a variable string?

Question

I have an object whose name is mural. I have assigned the name mural to the title of an anchor element. When user clicks and element I want to store the title of the anchor in a variable called sprite. I then want to access that object whose name corresponds to the sprite variable string.

Here is my code:

var mural= new Object();
mural.top='0px';
mural.left=-'510px';

var stamps= new Object();
stamps.top='0px';
stamps.left=-'1886px';

var sprite=$(this).attr('title');

$(".image-holder").css("background-position",'sprite.top, sprite.left');

It's not working because the the variable sprite is just a reference to $(this).attr('title'), how do I make it reference the object?

Oh and I know that .css jquery statement probably wont work, I'm not sure yet of the correct way to have two values that don't need quotations in as the second argument. But I am mainly concerned with the way to get access to the object.

Answer 1

Use bracket notation, e.g. if stamps and mural are global objects:

var sprite = window[$(this).attr('title')];

JavaScript does not parse strings for variable substitution, you have to use string concatenation as the others already showed:

.css("background-position", sprite.top + ' ' + sprite.left);

---

But depending on the context, maybe it is possible to just use CSS:

.mural {
     background-position: 0px 510px;
}

.stamps {
     background-position: 0px 1886px;
}

JS

$('a').click(function() {
    $(".image-holder").addClass($(this).attr('title'));
});

---

If this is not possible, I would actually store both sprites in a map:

// in some higher scope
var sprites = {
    mural: {
        top: '0px',
        left: '510px'
    },
    stamps: {
        top: '0px',
        left: '1886px'
    }
};

// in your event handler
var sprite = sprites[$(this).attr('title')];

But without knowing more about the context it is difficult to give a better suggestion.

Answer 2

EDIT: I finally know what you are aiming for. Please refers to Felix Kling's answer (the window[$(this).attr("title")] part.) and I think his meets your need. :-)

---

Replace 'sprite.top, sprite.left' into sprite.top + "," + sprite.left

Properties of elements cannot store any variable, but only string.

If you want a dynamic access to the mural Object, just replace sprite into mural from above.

Therefore, I assume that you want an access to the data of mural Object instantly at clicking the element.

JSON.stringify(mural) and save to the title property of the A Element.

When it needs to be extracted, simply spite = JSON.parse($(this).attr("title")) and get that time of Object.

More than this, I suggest you to store it in a new variable instead of storing it at title property if I meet your real expectation.

Answer 3

It is easier to use object literals (I'll assume =- is a typo):

var mural = {top:'0px', left:'510px'};
var stamps= {top:'0px', left:'1886px'};

var sprite = this.title;

I would assume that the above will set sprite to be a string primitive, therefore it is unlikely to have a top or left property, but presuming you fix that and sprite is an object (or perhaps you meant to use mural or stamps), then:

$(".image-holder").css("background-position", sprite.top +
  ' ' + sprite.left);