JQuery - 用於存儲數據的最優雅的方式，以供javascript使用

我只是好奇什麼是存儲數據供JQuery使用的最佳方式 - 我設置了一個基本的MP3播放器，以及標題，藝術家，曲目和文件名都需要保存在JQuery點擊無線接口後才能檢索的地方。我正在考慮將它們作爲標籤內的簡單屬性來描述，如下所示：JQuery - 用於存儲數據的最優雅的方式，以供javascript使用

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

但我猜測這可能被認爲是不好的形式。我知道我可以通過XML將它們引入，但我寧願不必從某個外部文檔中檢索。任何人都有一個好的解決方案？

來源

2011-02-26 mheavers

「最優雅」和「最好」的方式？這是乞求被關閉的主觀。定義你的優雅和「最佳」的措施。 – 2011-02-26 14:11:19

我相信你正在尋找的是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>

來源

2011-02-26 14:08:49

或者你可以使用JSON字符串發送給他們，然後轉化成一個東西。

來源

2011-02-26 14:13:16 amitchd

我覺得使用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>

然後風格那些跨越看起來你喜歡的方式 - 甚至可能隱藏一些數據。

來源

2011-02-26 14:21:27 Neall

數據概念是可以接受的，並且是將數據附加到標記的HTML5的首選方式。然而，錨是否實際上被用於其他任何事情？我會簡單地將數據輸出爲JSON，沿着線條

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

來源

2011-02-26 18:38:00 MJJames

JQuery - 用於存儲數據的最優雅的方式，以供javascript使用

回答

相關問題