Добро пожаловать в Stack Overflow и поздравляем с первым вопросом.
Работа с несколькими значениями id может быть громоздкой, если у вас есть динамическая страница c с нефиксированным количеством элементов, которыми вы хотите манипулировать. Поэтому, если элемент <video> не находится в совершенно другом разделе страницы и нет другого способа, кроме как выбрать его с помощью getElementById, тогда я предлагаю использовать другой подход.
Обе .close и элементы video являются потомками (или внуками) элемента .popup. Это полезная информация! Это делает использование делегирование события очень многообещающим.
Большинство событий bubble . Это означает, что, например, когда ребенок запускает событие click, событие проходит вверх через каждого родителя, пока не достигнет тега <html>. Теперь мы можем прослушать щелчок на дочернем элементе и обработать его от родителя. Как прислушиваться к щелчку на .close, но обрабатывать его от каждого .popup. Больше нет необходимости в значениях id.
Выберите все элементы .popup. L oop над ними и слушайте их click события с addEventListener. Не используйте jQuery и Vanilla JavaScript переплетаются , и, на мой взгляд: лучше все-таки изучить Vanilla, так как это поможет вам лучше понять, как работает JavaScript.
В функции для события click вы захотите узнать, была ли нажата кнопка .close. Если есть, то остановите видео. Если нет, то ничего не делать. Каждое событие дает вам Event объект. Этот объект предоставляет вам информацию о типе события, элементе, вызвавшем событие, положении мыши и т. Д. c.
Свойство event.target - это элемент, по которому щелкают, который вызвал событие. Мы можем проверить, является ли это кнопка .click, используя метод .closest(). Если это не тот элемент, который мы ищем, он вернет null. В противном случае мы solid.
Затем используйте querySelector из текущего всплывающего окна, чтобы найти видео внутри него. У вас есть ваше видео! Теперь вы можете передать это функции stopVid и приостановить ее.
В приведенном ниже примере показаны все шаги, упомянутые выше в коде. Пожалуйста, дайте мне знать, если я был неясен, или у вас есть какие-либо вопросы.
// Get all popup <div> elements.
const popups = document.querySelectorAll('.popup');
/**
* This stop function needs to know which
* <video> element you want to stop.
*/
function stopVideo(video) {
video.pause();
video.currentTime = 0;
}
/**
* When clicking inside the popup, check
* if the .close button is clicked. If it
* is then pause the video if it is present.
*/
function onPopupClick(event) {
const popup = this; // 'this' is element we are listening to.
const close = event.target.closest('.close');
if (close === null) {
return; // Stop the function.
}
const video = popup.querySelector('video');
if (video !== null) {
stopVideo(video);
}
}
// Loop over each popup.
for (const popup of popups) {
popup.addEventListener('click', onPopupClick);
}
Удачи!