Как сделать функцию для подгрузки соответствующего видео?

Question

[Сергей Миллер]

Привет!

Есть на странице 20 блоков или больше в дальнейшем будет

<div class="watch-video">...</div>
на сайте есть отдельно загружен файл videos.html в нем iframe-ы с ютюба, типа:

<div id="video_1"><div class="overlay"></div><div class="popup"><div class="close-popup"></div>
<iframe src="https://www.youtube.com/embed/avNIsHdwtOg?rel=0&enablejsapi=1&amp;controls=0&amp;showinfo=0?ecver=1&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>
<div id="video_2"><div class="overlay"></div><div class="popup"><div class="close-popup"></div>
<iframe src="https://www.youtube.com/embed/e_BeZ0uxcAo?rel=0&enablejsapi=1&amp;controls=0&amp;showinfo=0?ecver=1&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>

При клике на .watch-video я подгружаю на страницу видео в div

$(document).on('click', '.watch-video', function(){
$('#uploadVideos').load('videos.html #video_1');});

Не могу понять как сделать чтобы при клике, допустим, на первый div.watch-video с файла videos.html подгружался первый по счету div c видео на страницу, при клике на второй - подряжался второй и так далее? Чтобы самому не писать постоянно

$('.watch-video').eq(0).click(function(){
$('#uploadVideos').load('videos.html #video_1);.....

и так далее, а автоматизировать это всё, так скажем.

Answer 1

[WebDev]

Можно использовать index, но правильнее было бы добавить блокам .watch-video порядковый номер через атрибут, например data-index="1"

$('.watch-video').click(function() {
const index = $(this).attr('data-index');
$('#uploadVideos').load('videos.html #video_'+index);.....

Comments

[Сергей Миллер]

Вот так да сработало, спасибо!