Элементы Mulitple с тем же 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

Большинство из этих ответов являются лишь частично правильными.

Для вашего разметки быть действительным, необходимо идентификаторов быть уникальный. Однако иногда неосторожные разработчики повторно используют один и тот же идентификатор в DOM. Не бойтесь, это не конец света, вы все равно можете получить доступ к нескольким элементам с тем же идентификатором, что и классы.

document.querySelectorAll('#vid'); 

Вернет элемент HTMLCollection (массив как объект) элементов с тем же идентификатором.

Answer 2

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 3

идентификаторов можно использовать только один раз в документе, и они должны быть уникальными. Вместо этого вы делаете то, что вам нужно сделать, это дать им класс, а затем нацелить этот класс и запустить функцию для каждого элемента этого класса.

Пример дать им класс = «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 4

Атрибут 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 5

Используя тот же идентификатор более из них недействительна разметки и, как 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.

Таким образом, их использование остается эксклюзивным, а пользовательские интерфейсы меняются. классы/css не будут влиять на ваш функциональный код, поскольку они не должны изменять атрибуты и наоборот.