具有相同 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="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 只返回一个元素，它将返回它遇到的第一个元素。

但是，如果您无法使用现有方案完全更改标记，则可以使用 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（类似对象的数组）。