javascript - JQuery - 用于存储 javascript 使用的数据的最优雅的方式

Question

我只是好奇什么是存储供 JQuery 使用的数据的最佳方式 - 我正在设置一个基本的 mp3 播放器，并且标题、艺术家、轨道和文件名都需要保存在某个地方以便 JQuery 检索点击 radio 界面。我正在考虑将它们描述为标签中的简单属性，如下所示:

<a href="{song_file}" data-title="{song_title}" data-artist="{song_artist}" data-album="{song_album}">

但我猜这可能被认为是错误的形式。我知道我可以通过 XML 将它们引入，但我宁愿不必从某些外部文档中检索。谁有好的解决办法？

Answer 1

我相信您正在寻找的是 jQuery 的 .data():http://api.jquery.com/jQuery.data/

这是一种可能的实现方式:

<div id="songs"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    jQuery(function() {

        // The following array can be trivially generated directly from your data,
        // by PHP's json_encode(), or your language's equivalent:
        var songs = [
            {
                file: '/path/to/song.mp3',
                title: 'A Day in the Life',
                artist: 'The Beatles',
                album: 'Sgt. Pepper\'s Lonely Hearts Club Band',
            }
            // ...
        ];


        var wrap = jQuery('#songs');
        for (var i=0, ii=songs.length; i<ii; i++) {
            jQuery('<a></a>')
                .text(songs[i].title)
                .attr('href', songs[i].file)
                .data('song-data', songs[i])
                .click(click_handler)
                .appendTo(wrap);
        }

        // then, you can retrieve the data like this:
        function click_handler() {
            var data = jQuery(this).data('song-data');
            alert('Album was: '+data.album);
            return false;
        }

    });
</script>