具有相同 ID 的多个元素

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，然后将 class 和运行的每个项目的功能作为 class.

的目标

例子给他们 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>

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

Answer 3

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 4

多次使用相同的标识符是无效标记，因为 getElementById 只有 return 一个元素，它将 return 它遇到的第一个元素。

但是，如果您无法使用现有场景完全更改标记，您可以使用 querySelectorAll 到 select 所有具有相同 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();
    });
}

However, if you can you should use other means to identify the elements, such as data attributes or classes.

Personally I'm leaning towards data attributes for functional use and leave classes for CSS use.

That way their uses stay exclusive and UI devs changing classes/css won't impact your functional code as they should not change attributes and vice versa.

Answer 5

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

要使您的标记有效，id 必须是唯一的。然而，有时粗心的开发者会在 re-use 中使用相同的 id DOM。不要害怕，这不是世界末日，您仍然可以访问具有相同 id 的多个元素，就像您使用类.

一样

document.querySelectorAll('#vid');

将 return 具有相同 ID 的元素的 HTMLCollection（类似对象的数组）。

具有相同 ID 的多个元素

Mulitple Elements with the same ID

javascript

video

getelementbyid