Uncaught : playlist.querySelector不是函数

Question

当用户单击其中一个缩略图img链接时，我试图将页面上的主视频更改为另一个视频。

本质上，这段代码应该是：

• 抓取每个视频播放列表(如果有一个或更多)
• 抓取每个播放列表、视频标记和源标记。
• 循环遍历所有视频链接
• 在我添加的数据-视频-src属性的每个链接中添加一个单击监听器，并将其应用于视频源，
• 加载视频。

下面是HTML：这是HTML代码

下面是JavaScript，但是当我运行它时，我得到：

"Uncaught : playlist.querySelector不是函数“

我做错什么了？

ChangeVideo.js

Answer 1

您正在执行for(playlist in document.querySelectorAll('.video-playlist'))，它将用document.querySelectorAll('.video-playlist')键的值设置playlist的值。由于document.querySelectorAll('.video-playlist')是数组类型，所以键将是0、1、2等。因此，playlist将有数值0，1，2，.使用此playlist.querySelector将给出该错误

"Uncaught : playlist.querySelector不是函数“

要克服这一问题，您需要选择document.querySelectorAll('.video-playlist')的每个元素，而不是它的index。为此，您需要更改for循环以使用of而不是in，如下所示

for(playlist of document.querySelectorAll('.video-playlist'))

当您在of循环中使用for时，它将把document.querySelectorAll('.video-playlist')的每个元素分配给playlist。当您在playlist中获得元素时，函数querySelector将是有效的。

Answer 2

问题是因为.将播放列表作为数组的索引。

尝尝这个

var playlists = document.querySelectorAll('.video-playlist');
for (var i = 0; i < playlists.length; i++) {
  var playlist = playlists[i];
  ...
});

同时，内部的for in循环也需要改变。

谢谢