如何在点击时删除多个播放列表项目?

Question

image 我有一个从 Jasonfile 加载 10 个项目的 api 当我点击 mehr(更多( 按钮时。如果再次单击，它会再加载 10 个，依此类推......在 JPlayer 文档中，它们只显示了如何一次删除 1 个项目：

myPlaylist.remove(); // Removes all items
myPlaylist.remove(0); // Removes the 1st item
myPlaylist.remove(1); // Removes the 2nd item
myPlaylist.remove(-1); // Removes the last item 

当我点击weniger(less(按钮时，是否可以一次删除10个项目？我试过这个：

$(".pc-less-btn.btn-{{ pk }}").click(function() {
myPlaylist.remove(10); // To Removes 10 items but doesn't works
});

Answer 1

选项 1：设置新的播放列表

$(".pc-less-btn.btn-{{ pk }}").click(function() {
const removeFromIndex = 10
// remove from end
const newPlaylist = myPlaylist.playlist.slice(myPlaylist.playlist.length - removeFromIndex)
// remove from start
// const newPlaylist = myPlaylist.playlist.slice(removeFromIndex)
myPlaylist.setPlaylist(newPlaylist)
});

选项 2：逐个删除(不推荐(

$(".pc-less-btn.btn-{{ pk }}").click(function() {
for (let i = 0; i < 10; i++) {
myPlaylist.remove(i); // indexes of playlist probably changes
}
});

Answer 2

这是一个棘手的解决方案。我想从播放列表中删除所有项目，所以我正在寻找解决方案，所以我发现这个技巧到目前为止对我有用。我已经在 2.9.2 版中测试过

假设您的播放列表对象是player，因此在任何jQuery单击事件中，您都可以像这样获取所选列表索引

$("#selector_id").on("click", function (e) {
var object = $(this);
var ids = []; // Fetch you ids in your way, either checkbox or anything or manual enter
// Then get the playlist from the player object.
var playlist = player.playlist;
// Check if playlist has data.
if (playlist && playlist.length) {
var new_playlist = [];
$.each(playlist, function (index, item) {
// If index is not in your ids then get the playlist item.
if (!ids.includes(index)) {
new_playlist.push(item);
}
});
// Now you have new playlist after removing selected items.
// Check if we have anything in new playlist.
if (new_playlist.length) {
// If we have data in new playlist then init playlist.
player._initPlaylist(new_playlist);
// Then call the refresh function with clearMedia event.
player._refresh(function () {
$(player.cssSelector.jPlayer).jPlayer("clearMedia");
});
// You can call update Control if you have Controls enabled.
}
}
});