我正在尝试在同一页面上使用相同 ID (#vid) 的三个视频上使用脚本。目前似乎只有一个视频可以使用该脚本。
var video = document.getElementById('vid')
// When the 'ended' event fires
video.addEventListener('ended', function(){
// Reset the video to
video.currentTime = 0;
// And play again
video.load();
});
Id必须是唯一的。你应该使用class，然后使用document.getElementsByClassName('className');
var video = document.getElementsByClassName('vid');
var myFunction = function() {
// Reset the video to
this.currentTime = 0;
// And play again
this.load();
};
for (var i = 0; i < video.length; i++) {
video[i].addEventListener('ended', myFunction, false);
}
该id属性应该是唯一的，否则总是只有第一个被选中。因此，class用于一组元素并迭代它们以附加事件处理程序。
<script>
var video = document.getElementsByClassName('vid');
// convert the element collection to array using Array.from()
// for older browser use `[].slice.call()` for converting into array
// and iterate over the elements to attach listener
Array.from(video).forEach(function(v) {
v.addEventListener('ended', function() {
v.currentTime = 0; // or use `this` to refer the element
v.load();
});
})
</script>
大多数这些答案只是部分正确。
为了使您的标记有效，id 必须是 unique。但是，有时粗心的开发人员会在 DOM 中重复使用相同的 id。不要害怕，这不是世界末日，您仍然可以像使用类一样访问多个具有相同 id 的元素。
document.querySelectorAll('#vid');
将返回具有相同 id 的元素的 HTMLCollection（类似数组的对象）。
ID 只能在一个文档中使用一次，并且它们应该是唯一的。相反，您应该做的是给他们一个类，然后以该类为目标，并在该类的每个项目上运行该函数。
例如给他们一个 class="vid"
<script>
var videos = document.getElementsByClassName('vid');
// When the 'ended' event fires
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('ended', function(){
// Reset the video to
videos[i].currentTime = 0;
// And play again
videos[i].load();
});
}
</script>
我不确定这个确切的代码是否适用于添加的事件侦听器，但这个概念是正确的。
使用多个相同的标识符是无效的标记，因为getElementById只返回一个元素，它将返回它遇到的第一个元素。
但是，如果您无法使用现有场景完全更改标记，则可以使用querySelectorAll选择具有相同id属性值的所有元素。
var videos = document.querySelectorAll('[id="vid"]')
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('ended', function() {
// Reset the video to
video.currentTime = 0;
// And play again
video.load();
});
}
但是，如果可以，您应该使用其他方法来标识元素，例如数据属性或类。
就我个人而言，我倾向于将数据属性用于功能用途，而将类留给 CSS 使用。
这样他们的使用就保持独占，并且 UI 开发人员更改类/css 不会影响您的功能代码，因为他们不应该更改属性，反之亦然。