爲每個播放列表生成HTML標記的最佳方法是什麼？

Question

我想知道如何實現以下功能。我利用Soundcloud API將所有播放列表導入網站。這，我已經完成了Soundcloud HTTP部分。

現在我想將每個播放列表/專輯包括該專輯的曲目列表和專輯封面圖片放入div元素中。該專輯的持有人。 標記的佈局很簡單：留下一個數字表示專輯封面，右側是一個無序列表，包含專輯曲目。

我想問的是，什麼是最好的方法是把每個相冊放在一個div中，每次相同的標記。

我現在擁有的是。在我的HTML擁有所有播放列表/專輯的div-holder。 比它應該填充每個功能。

HTML

<div class="row albums"></div> <!-- All albums here --> 

JS

var albumHolder = $('.albums'); 
$(playlists).each(function(index, playlist) { 
    var playlistID = playlist.id; 

    albumHolder.append('<div id="#' + playlistID + '"></div>'); 

}); 

上面的代碼將創建每個播放列表與albumHolder內部的播放列表保存所有專輯的id一個div。

總之：我想每次都使用相同的佈局，併爲我在上面的代碼創建的album div內的每個專輯生成相同的佈局。

希望有人能幫助我嗎？ 卡斯帕

Answer 1

的最好的辦法完全取決於應用程序的本質！假設您只有整個頁面中只有專輯和相關歌曲，您可以繼續並每次重寫HTML！

但是，如果您在頁面上有其他組件（例如，菜單，搜索欄等），則刮整個頁面不是一個好主意！在這裏，您應該只重寫專輯和播放列表的父母分區。這樣你就不必重新加載其他東西，你可以提供更好的用戶體驗。

希望這回答你的問題。

UPDATE：

要替換HTML的某些部分可以參考下面的代碼

$('#append').click(function(){ 
 
\t $('#container').append('<b> Hello </b>'); 
 
\t 
 
}); 
 
$('#replace').click(function(){ 
 
\t $('#container').html('<b> I am just replaced!</b>'); 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>I would like to say: <span id="container">I am the Dummy Text</span></p> 
 
<button id="replace">Replace Dummy Text</button> 
 
<button id="append">Append Hello</button>