Question

我想知道如何实现以下目标。我利用Soundcloud API将所有播放列表导入网站。这个，我已经完成了Soundcloud HTTP部分。

现在我想将每个播放列表/专辑（包括该专辑的曲目列表和封面图片）放在div元素中。该专辑的持有人。标记的布局很简单：左边是一个数字，用于保存专辑封面，右边是一个包含专辑曲目的无序列表。

我想问的是，每次使用相同的标记时，最好的方法是将每张专辑放入div中。

我现在拥有的是什么。在我的HTML包含所有播放列表/专辑的div持有者中。应该填写每个功能。

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>');

});

上面的代码会为每个播放列表创建一个div，其中包含所有相册中的该播放列表id。

总而言之：我希望每次都使用相同的布局，并为我使用上述代码创建的album div内的每个专辑生成相同的布局。

希望有人可以帮助我吗？卡斯帕

Answer 1

最佳方式完全取决于应用程序的性质！

比如说，您只有整个页面中的专辑和相关歌曲可以继续，并且每次都重写HTML！

但是如果页面上有其他组件（例如，菜单，搜索字段等），在这种情况下刮掉整个页面并不是一个好主意！在这里你应该只重写专辑和播放列表的parent-div。这样您就不必重新加载其他内容，并且可以提供更好的用户体验。

希望这能回答你的问题。

<强>更新

要替换HTML的某些部分，您可以参考以下代码

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

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

为每个播放列表生成HTML标记的最佳方法是什么？

1 个答案: