Question

我很好奇存储JQuery使用的数据的最佳方式是什么 - 我正在设置一个基本的mp3播放器，标题，艺术家，曲目和文件名都需要保存在JQuery的某个地方。单击无线电接口。我在考虑将它们作为标签中的简单属性进行故事记录，如下所示：

<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>

Answer 2

或者您可以使用json字符串发送它们，然后转换为对象。

Answer 3

我认为使用data-*属性是恰当的。

或者，您可以将标题，艺术家和专辑作为锚点标记内的跨度。像这样：

<a href="/url/of/purple-rain.mp3">
  <span class="title">Purple Rain</span>
  <span class="artist">Prince</span>
  <span class="album">Purple Rain</span>
</a>

然后将这些跨度设置为您喜欢的样式 - 甚至隐藏一些数据。

Answer 4

数据概念是可以接受的，并且是将数据附加到标记的HTML5的首选方式。然而Anchors实际上是用于其他什么？我只是简单地将数据输出为JSON，而不是

var MP3TrackData = [{TrackName ='something'}];

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

4 个答案: