Примечание: я пытался исследовать это и пытался несколько вариантов кодирования, но я не могу заставить что-либо работать должным образом. Я предполагаю, что следующее может быть выполнено с использованием jQuery replaceWith - возможно, с помощью подстановочных знаков селектора для сокращения / повторного использования кода во всех функциях - но я не знаю, как это сделать.
У меня есть DIV, который должен содержать несколько видеоплееров (которые накладываются друг на друга или накладываются друг на друга), при этом каждый игрок должен иметь свой собственный вложенный DIV с уникальным идентификатором. В другом DIV (меню навигации) есть IMG, которые я хочу использовать для управления выбором и отображением видео DIV. Вот конкретные требования:
- Каждый IMG должен загружать свой идентификатор DIV видео через событие onclick.
- Когда загружается / отображается одно видео DIV, все остальные видео DIV должны быть скрыты.
- Воспроизведение каждого видео уже контролируется отдельной функцией JavaScript, поэтому за механизмом замены / замены одного видео DIV на другое видео DIV сразу же должна следовать функция воспроизведения (все они объединяются в одно событие onclick для каждого видео ).
А вот некоторые соответствующие основные фрагменты кода:
<div class="col-4 text-right"><img src="images/1.png" width="60" height="60" alt="" onclick="play1()"></div>
Это пример текущего IMG, вызывающего воспроизведение видео на JavaScript. Всего будет задействовано около 10 изображений, используемых для запуска воспроизведения 10 видео (одно видео, соединенное за клик). Все изображения могут использовать соглашение об именах X .png, а все события onclick могут использовать соглашение об именах воспроизведения X () - в сочетании с нумерацией.
<div class="col-8"><div id="vid1"></div></div>
Это пример вложенного видео DIV. Все видео DIV могут использовать соглашение об именах vid X , и все видео DIV содержатся в этом родительском DIV col-8.