0

我在我的网站上使用精美的音乐播放器，并且我有多个以下格式的播放列表：

<div class="playlist">
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
</div>
<div class="playlist">
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
</div>
<div class="playlist">
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
   <a href="mysong.mp3" class="fmp-my-track add_link">add this song</a>
</div>

我希望当用户第一次单击一个播放列表中的任何链接时，它会清除播放列表，然后在下次单击时将歌曲添加到播放列表中。例如，当用户单击第一个播放列表中的任何链接时，它会清除播放列表并将歌曲添加到播放列表中，并且在该播放列表中的下一次单击时，它不会清除播放列表。当用户第一次单击此处相同的其他播放列表中的任何链接时，它将清除播放列表，然后添加歌曲。我正在使用下面的代码来实现这一点，但它不起作用：

$(".playlist").each(function(){
    $(".add_link").one("click", function(){
        $.fancyMusicPlayer.clear();
});
    $(".add_link").click(function(){
        $.fancyMusicPlayer.addTrack(this.href, this.title, this.target,false);
});
});

在播放列表中添加歌曲工作正常，但在第一次单击时清除播放列表的功能不起作用。谁能帮我？

4

2 回答 2

1

你有一个选择器问题。您希望遍历每个播放列表并将行为分配给每个播放列表中的每个 add_link。但是您正在做的是为页面上的每个 add_link 分配行为，而不是在每个播放列表中。$('.add_link') 每次迭代都会抓取页面上的每个项目。

你应该这样做：

$('.playlist').each(function() {
  $(this).find('.add_link').one(...);
  $(this).find('.add_link').click(...);
});
于 2013-08-12T05:52:10.780 回答
1

您需要保留当前播放列表的引用，以检查新点击是来自同一个播放列表还是另一个播放列表。由于您当前的播放列表元素没有 id，我在下面的示例代码中使用了它们的索引：

var inPlaylist = 0;
$(".add_link").click(function(){
    var playlistIndex = $(this).parent('.playlist').index();
    if(playlistIndex != inPlaylist){
        $.fancyMusicPlayer.clear();
        inPlaylist = playlistIndex;
    }
    $.fancyMusicPlayer.addTrack(this.href, this.title, this.target,false);
});
于 2013-08-12T05:59:19.037 回答