how can send data-* attr to a js function?

Question

i need to use jplayer add to playlist in my joomla website and i will when user click on icon of play , jquery get the data-mp3 and data-name and data-poster from tag link and add to above function to add that sound in player please help me how did it? i cant get data-* attribute and send to myplaylist.add function for add that sound data to playlist of jplayer

$("#playlist-equivalent-1-a"). click(function() {
    myPlaylist.add({
        title:"title",
        artist:"artist",
        mp3:"url",
        poster: "url"
    }, true);
});

Answer 1

You're in luck, jQuery has a built-in function for retrieving data-* attributes: https://api.jquery.com/data/.

Example: Get the mp3 title and artist from an anchor tag

$('#datatag').click(function() {
  $('#output').text($('#datatag').data('title') + ' from ' + $('#datatag').data('artist') + ' is a really good song!');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a data-artist="De Jeugd van Tegenwoordig" data-title="Sterrenstof" id="datatag">Click me to reveal my data.</a><br>
<span id="output"></span>