对象索引，然后使用youtube API播放

Question

我正在使用youtube api搜索youtube视频。然后将以#searchBar视频ID ex 显示视频。NJNlqeMM8Ns为data-video。我通过按下img获得视频ID：

<img data-video = "{{videoid}}" src = "bilder/play.png" alt = "play" class = "knapp" width = "40" height = "40">

在我对javascript的较差理解中，哪一个成为（this）。当我搜索视频时，我将获得多个结果，这意味着我将获得多个img标签。

在这种情况下，我想在第一首歌曲播放完后播放下一首歌曲。当我按下img标签时，我试图获取索引：

$(".knapp").click(function(){
    var index = $(".knapp").index(this);
    alert(index);
});

但是，当视频播放完毕后提醒索引时，我总是会返回值0。

所以我想我可以做这样的事情：

function onPlayerStateChange(event) {
   if (event.data == YT.PlayerState.ENDED){
    playNext();
   }
}

$('#searchBar').on('click', '[data-video]', function(){
player.current_video = $(this).attr('data-video');
playVideo();
});

function playVideo(){
var video_id = player.current_video;
player.loadVideoById(video_id, 0, "large");
}

function playNext(){
var player.current_videon = **$(this + 1).attr('data-video');**
var next_id = player.current_videon;
player.loadVideoById(next_id, 0, "large");
}

但是我不确定如何使其工作，如您在粗体部分中所看到的，我可以解决这样的问题还是需要另一种方法？

编辑：通过一些研究，我发现需要设置当前正在播放的视频的值，并且在完成视频播放后，我将该数字加1。但是，即使确实播放了下一个视频，我也无法选择我想要的那首歌...

    function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED){
    player.current_video++;
    playVideo();
}
}
var player = document.querySelector('iframe');
function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '40mSZPyqpag',
playerVars: {rel: 0},
events: {
  'onStateChange': onPlayerStateChange
}
});
player.current_video = 0;
}

$('#searchBar').on('click', '[data-video]', function(){
player.current_video = $(this).index();
alert(player.current_video);
playVideo();
});

function playVideo(){
var video_id = $('[data-video]').eq(player.current_video).attr('data-video');
player.loadVideoById(video_id, 0, "large");
}  

Answer 1

我收到了获取最近的 li 索引的建议player.current_video，因此我更新了我的data-videoimg 标签。

<li class = liItem>
    <img data-video = "{{videoid}}" src = "bilder/play.png" alt = "play" class = "knapp" width = "40" height = "40">
</li>

然后我在编辑的示例中更改了单击函数的索引：

$('#searchBar').on('click', '[data-video]', function(){
player.current_video = $(this).closest('li').index();
playVideo();
});

有了这个新功能，我就可以选择并播放下一首歌曲了！感谢 @cale_b 为我提供的建议.closest('li')。