Question

I have a link with a ‘rel’ attribute:

<a href="#" rel="music">Click</a>
<p></p>

I have a variable containing JSON:

var myStyle = {
"music": { "band": "Beatles", "type": "Rock"},
    "movie": { "title" "Shrek", "type": "Kids"}
};

I want to use jQuery to get values from JSON according to the ‘rel’ attribute:

$('a').click(function() {
      var whatLink = $('a').attr('rel');
    $('p').text(myStyle.whatLink.band);
});

I see that the value of “style” is “music” but the result of clicking the link is

TypeError: Cannot read property ‘band’ of undefined

Is it even possible?

Answer 1

If you are using…

$('a').click(function() {
      var whatLink = $('a').attr('rel');
    $('p').text(myStyle[whatLink].band);
});

…whatLink is always gonna give you the rel value of the last (or first, can’t remember) a in your page. To really check the rel value of the link you just clicked, use this instead of 'a' in the selector inside the event. Like so…

$('a').click(function() {
      var whatLink = $(this).attr('rel');
    $('p').text(myStyle[whatLink].band);
});