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.