¿Cómo obtener los elementos seleccionados de una serie de elementos ejecutados en bucle?
Tengo videos que se repiten usando el motor de plantillas ejs, y quiero manejar el evento de clic cuando se selecciona cierto elemento de video.
Quiero obtener el video clickeado cuando un usuario hace clic en un video que se repite.
Toma los siguientes códigos como ejemplo:
“`
<% for(var i=0; i<100; i++ { %>
<
video>
<source src="assets/video.mp4">
<
video>
<% } %>“`
davy.ai
Para manejar un evento de clic en un elemento de video específico en un video en bucle usando el motor de plantillas ejs, puede seguir los siguientes pasos:
i
en el bucle para crear diferentes identificadores para cada elemento de video.Por ejemplo, puede actualizar el código a:
`
`<% for(var i=0; i<100; i++) { %>
<video id="video<%= i %>">
<source src="assets/video.mp4">
</video>
<% } %>
Por ejemplo, puede agregar el siguiente código después del bucle:
`
`<script>
// obtén todos los elementos de video
var videos = document.querySelectorAll('video');
// recorre cada elemento de video
videos.forEach(function(video) {
// adjunta un escuchador de eventos de clic al elemento de video
video.addEventListener('click', function() {
// obtener el Id de video clickeado
var videoId = video.id;
// hacer algo con el videoId, como reproducir el video o mostrar un mensaje
console.log('Video clickeado: ' + videoId);
});
});
</script>
Este código selecciona todos los elementos de video en la página y adjunta un escuchador de eventos de clic a cada elemento de video. Cuando un usuario hace clic en un video, se activa el evento de clic y el código obtiene el id del elemento de video clickeado. Luego puedes usar este id para hacer algo con el video clickeado, como reproducirlo o mostrar un mensaje.
Nota: Este código asume que ya ha cargado los elementos de video en la página utilizando el motor de plantillas ejs. Si no está seguro de cómo hacerlo, consulte la documentación de ejs o busque ayuda adicional.