Question

我有一个包含多个div的页面，其中包含html5视频播放器。基本上是这样的

<div class="panel">
  <video class="player"><source src="video1.mp4" type="video/mp4" /></video>
</div>
<div class="panel">
  <video class="player"><source src="video2.mp4" type="video/mp4" /></video>
</div>
...

现在我想用类“panel”迭代所有元素并暂停所有视频播放器。所以我在JavaScript中尝试这个：

var panels = document.getElementsByClassName("panel");
for (i = 0; i < panels.length; i++) {
  var video = panels[i].getElementsByClassName("player");
  video.pause();
}

我得到的是此错误消息：

Uncaught TypeError: panels[i].getElementByClassName is not a function

有没有人可以帮我解决这个问题？

提前多多感谢!!

Answer 1

您的问题有误导。它指的是：

document.getElemtsByClassName(...)

应该是：

document.getElementsByClassName(...)

假设这只是你问题中的拼写错误（因为你没有报告可能导致的错误），那么：

这行代码获取HTMLCollection，而不是单个DOM元素：

var video = panels[i].getElementsByClassName("player");

所以，你不能这样做：

 video.pause();

因为上面代码行中的video是HTMLCollection，而不是DOM元素，而HTMLCollection没有.pause()方法。要从HTMLCollection获取DOM元素，您必须使用属性索引到达它以获取单个DOM元素：

 video[0].pause();

或者，您可以迭代整个HTMLCollection以对HTML集合中的所有DOM元素进行操作。这将获得每个div中的第一个玩家对象（参见[0]）：

var panels = document.getElementsByClassName("panel");
for (i = 0; i < panels.length; i++) {
  var video = panels[i].getElementsByClassName("player")[0];
  video.pause();
}

或者，如果您希望所有播放器对象都使用此技术，则需要使用两个for循环：

var panels = document.getElementsByClassName("panel");
for (var i = 0; i < panels.length; i++) {
  var videos = panels[i].getElementsByClassName("player");
  for (var j = 0; j < videos.length; j++) {
      videos[j].pause();
  }
}

您也可能只想使用document.querySelectorAll()并在一次查询和一次迭代中完成所有操作：

var videos = document.querySelectorAll(".panel .player");
for (var i = 0; i < videos.length; i++) {
    videos[i].pause();
}

另外，鉴于您的HTML，您不清楚为什么首先查询.panel元素。如果您没有其他.player个对象试图避免，您可以直接在更简单的查询中获取播放器对象：

var videos = document.querySelectorAll(".player");
for (var i = 0; i < videos.length; i++) {
    videos[i].pause();
}

而且，虽然你没有提出使用jQuery的问题，但它通常对DOM查询，迭代和操作很有用：

$(".panel .player").each(function() {
    this.pause();
});

div中的getElementsByClassName错误

1 个答案: