如何在jQuery中实现可排序的播放列表

I am making a simple music playing online app. I would like to make a song playlist, and I would like the songs in the playlist to be sortable. I plan to use the jQuery "sortable" plugin. However, I would like to keep track of what order the songs are in, so that when one song finishes, I know which song to start next. Instead of creating an event handler to be executed when the user changes the order of the songs, and actually keeping track of what order songs are in, my current solution is simply this:

我正在制作一个简单的音乐播放在线应用程序我想制作一个歌曲播放列表，我希望播放列表中的歌曲可以排序。我计划使用jQuery“sortable”插件。但是，我想跟踪歌曲的顺序，这样当一首歌结束时，我知道下一首歌要开始。我不是创建一个事件处理程序，以便在用户更改歌曲顺序时执行，并实际跟踪歌曲的顺序，我目前的解决方案就是这样：

1. Keep track of the id of the currently playing song element
2. 跟踪当前正在播放的歌曲元素的ID
3. When the song finishes, use jQuery to find the element with the current id
4. 当歌曲结束时，使用jQuery查找具有当前id的元素
5. Use .next() to get the next song to play
6. 使用.next（）来播放下一首歌曲

Is there anything wrong with this implementation? Would it be better to constantly keep track of the order of songs?

这个实现有什么问题吗？不断跟踪歌曲的顺序会更好吗？

2 个解决方案

#1

Seems entirely appropriate and I actually use that exact same approach on a completely unrelated website. Here is what I do to get the next id, I know you said you already had something working but I thought I'd share anyways in case it helps:

似乎完全合适，我实际上在完全不相关的网站上使用完全相同的方法。这是我为了获得下一个身份而做的事情，我知道你说你已经有了一些工作，但我认为无论如何我都会分享以防它有用：

current_id = window.my_id;
next_id = $('#' + current_id).next().attr('id');

if (next_id == undefined) {
    return; // no more siblings after it
}

// do what you need to do here with next_id to actually load the next content
// in my web apps case, it removes some elements and just changes the hash
// which another function handles

current_id = next_id;
window.my_id = current_id;

#2

There isn't really anything wrong with that. It saves having to keep an Array of the order, which would need to be updated per reorder as opposed to just reading the next track only when required (at end of previous one).

这没有什么不妥。它节省了必须保留订单的数组，这需要每次重新订购更新，而不是仅在需要时（在前一个的末尾）读取下一个轨道。