Question

I have 50 dots on a page, each individual divs. When I click one, I want to use the ID to pull values out of an array. I can get the ID but I’m having trouble using that value to get stuff out of my array. Perhaps a global variable problem? Not sure. Not even sure if this is the best way to handle multiple clicks that access multiple data. Any help is appreciated!

var location0 = {"name" : "Location 1", "image" : "image1.jpg"};

$('.dot').click(function(){
    var thisLocation = $(this).attr("id");
    alert(thisLocation); //Returns "location0"
    alert(thisLocation["image"]); //Returns "undefined"
});

Here’s a fiddle.

Answer 1

I’d do it like this :

var locations = {
    location1 : {"name" : "Location 1", "image" : "image1.jpg"},
    location2 : {"name" : "Location 2", "image" : "image2.jpg"}
}

$('.dot').click(function(){
    alert(locations[this.id].name);
});
​

FIDDLE