Question

我正在尝试在同一页面上使用相同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();
});

Answer 1

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);
}

Answer 2

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>

Answer 3

ID只能在文档中使用一次，并且它们应该是唯一的。你所做的是给他们一个类然后定位该类并在该类的每个项目上运行该函数。

示例给他们一个类=＆＃34; vid＆＃34;

<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>

我不确定这个确切的代码是否适合添加事件监听器，但概念是正确的。

Answer 4

使用相同的标识符多于1是无效标记，而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开发人员的变化   classes / css不会影响你的功能代码，因为它们不应该改变   属性，反之亦然。

Answer 5

这些答案中的大多数只是部分正确。

要使标记有效， ID必须是唯一的。但是，有时粗心的开发人员会在DOM中重复使用相同的id。不用担心，它不是世界末日，你仍然可以使用与使用类相同的id访问多个元素。

document.querySelectorAll('#vid');

将返回具有相同id的元素的HTMLCollection（类似对象的数组）。

具有相同ID的多个元素

5 个答案: