【发布时间】：2014-02-02 05:50:13
【问题描述】：
我正在创建一个页面，我想为一个播放器提供多个播放列表。
这是脚本，你可能以前见过：
var audio;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
audio = $('.player');
playlist = $('.album_tracks_container');
tracks = playlist.find('li a');
len = tracks.length;
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
$('.audioplayer').removeClass('audioplayer-stopped');
$('.audioplayer').addClass('audioplayer-playing');
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
$('.audioplayer').removeClass('audioplayer-stopped');
$('.audioplayer').addClass('audioplayer-playing');
});
}
function run(link, player){
$('.album_tracks_container').find('.album_tracks_light, .album_tracks_dark').removeClass('album_tracks_active');
player.src = link.attr('href');
par = link.parent();
par.addClass('album_tracks_active').siblings().removeClass('album_tracks_active');
$('.album_tracks_container').find('.album_tracks_light, .album_tracks_dark').find('.album_tracks_number, .album_tracks_text').removeClass('album_tracks_number-text_active');
par.find('.album_tracks_number, .album_tracks_text').addClass('album_tracks_number-text_active');
audio[0].load();
audio[0].play();
}
现在我想将播放列表变量更改为这样的内容（是的，我不知道 javaScript，但我希望你能得到我想做的事情）
$('a').click(function(){
playlist = $(this).closest('.album_tracks_container');
});
将它附加到最近的 div 与该类到我单击的链接。
我需要这样做的原因是因为我在页面中有多个“.album_tracks_container”，并且如果没有更改代码，它只会选择最上面的一个作为播放列表（当我在下面播放一首歌曲时，接下来歌曲将在顶部播放列表中继续播放）
所以是的，我希望播放列表 var = 最接近我单击的“a”（链接）的 .album_tracks_container。
我希望我说得通。
这是html
<body>
<div class="player_container">
<audio class="player" preload="auto" controls>
<source src="media/playlist1/01.wav"/>
</audio>
</div>
<div class="content_container">
<div id="A">
<div class="album_container">
<div class="album_art playlist1"></div>
<div class="album_artist_title">
<span class="album_artist_title_text">playlist1</span>
</div>
<div class="album_album_title">
<span class="album_album_title_text">3 songs</span>
</div>
<ul class="album_tracks_container">
<li class="album_tracks_light">
<span class="album_tracks_number">01</span> <span class="album_tracks_text">song 1</span>
<a href="media/playlist1/01.wav"></a>
</li>
<li class="album_tracks_dark">
<span class="album_tracks_number">02</span> <span class="album_tracks_text">song 2</span>
<a href="media/playlist1/02.wav"></a>
</li>
<li class="album_tracks_light">
<span class="album_tracks_number">03</span> <span class="album_tracks_text">song 3</span>
<a href="media/playlist1/03.wav"></a>
</li>
</ul>
</div>
</div>
<div id="C">
<div class="album_container">
<div class="album_art playlist2"></div>
<div class="album_artist_title">
<span class="album_artist_title_text">playlist2</span>
</div>
<div class="album_album_title">
<span class="album_album_title_text">3 songs</span>
</div>
<ul class="album_tracks_container">
<li class="album_tracks_light">
<span class="album_tracks_number">01</span> <span class="album_tracks_text">song 1</span>
<a href="media/playlist2/01.wav"></a>
</li>
<li class="album_tracks_dark">
<span class="album_tracks_number">02</span> <span class="album_tracks_text">song 2</span>
<a href="media/playlist2/02.wav"></a>
</li>
<li class="album_tracks_light">
<span class="album_tracks_number">03</span> <span class="album_tracks_text">song 3</span>
<a href="media/playlist2/03.wav"></a>
</li>
</ul>
</div>
</div>
</div>
</body>
【问题讨论】：
-
您的代码将找到与该类最近的父级。好的，你有什么问题。？能否请您详细说明一下您的情况。？
-
基本上发生了什么，因为tracks = playlist.find('li a');它会与其他播放列表混淆，因为它们共享相同的编号
-
“我不懂javascript”是什么意思？
-
我的意思是我不擅长它，我是初学者，当我使用这个 $('a').click(function(){ playlist = $(this ).closest('.album_tracks_container'); });它似乎打破了播放列表，当我点击一首歌曲时，我改为定向到声音文件的来源
-
假设我在播放列表 2 上收听曲目 2，播放完成后会跳转到播放列表 1 上的曲目 3 - 这就是我的问题。
标签： javascript jquery html html5-audio playlist