jQuery - soundmanager2 show different image for each track

Question

I am using soundmanager2 jquery plugin and I want to show different image for each track. However it's only showing the same image for each track. (track1.jpg)

html :

<div class="ui360"><a href="audio/track1.m4a" data-src="track1.jpg">Track 1</a></div>
<div class="ui360"><a href="audio/track2.m4a" data-src="track2.jpg">Track 2</a></div>
<img src="img/cover.jpg" id="track-img">

jquery code:

$('.ui360 a').on('click', function(){ 
  $("#track-img").attr("src", $(".ui360 a").attr("data-src"));
});

Answer 1

You ask for the first image of a div with class ui360, which always will be track1.jpg Try something like:

(Code not tested)

 $('.ui360 a').on('click', function(item){ 
  $("#track-img").attr("src", item.attr("src"));
});

Answer 2

Try with $(this), .data():

$('.ui360 a').on('click', function(){ 
   $("#track-img").attr("src", $(this).data("src"));
});

Bind a click event on the anchors available in the .ui360 element then change the src of the #track-img with use of $(this).data("src"). Which runs in the context of the selector. It changes the src attribute of the target image.