Dynami c функция нажатия с автоматической генерацией идентификаторов - PullRequest
Новая
       6

Dynami c функция нажатия с автоматической генерацией идентификаторов

2 голосов
/ 03 февраля 2020

У меня есть следующий html код, который автоматически генерируется шорткодом в Wordpress. Он состоит в том, чтобы динамически добавлять видео (с Youtube) в начало. Моя идея состоит в том, чтобы иметь несколько видео на одной странице. Каждый раз, когда пользователь добавляет шорткод, он создает html. 

<div class="row entry-video">
  <div class="video-container">
    <div class="video-cover" style="background-image:url('img/cover-video.jpg');"></div>
    <iframe class="video-iframe" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Чтобы сделать дизайн более привлекательным, пользователь может добавить свою собственную обложку поверх видео (класс video-cover). Поэтому, когда вы нажимаете на изображение, обложка исчезает и автоматически воспроизводит видео.

Моя проблема в том, что код динамически добавляется с помощью шорткода, и на странице есть несколько видео, но я не могу сделать так, чтобы действие щелчка (для удаления изображения и воспроизведения для каждого видео) работало правильно.

Код JS для автоматического добавления идентификатора для каждой записи видео: 

$('.entry-video').each(function(i) {
  $(this).attr('id', 'video-' + (i + 1));
});

The JS код для снятия крышки и воспроизведения видео: 

$('.video-cover').on('click',function(e){
  $(this).fadeOut(400);
  $('.video-iframe')[0].src += "?autoplay=1";
  e.preventDefault();
});

Функция щелчка работает нормально, если есть только одно видео. Оба сценария работают, но они не связаны друг с другом. Все становится сложнее, если есть больше видео. Поэтому я хотел бы создать динамическую c функцию, которая генерирует и автоматически определяет идентификатор обложки, по которому щелкнули, в соответствии с идентификатором iframe сыгранной.

Любая помощь будет высоко ценится, спасибо!

1 Ответ

3 голосов
/ 03 февраля 2020

Генерация id атрибутов во время выполнения - это анти-паттерн, не делайте этого.

Вместо этого используйте общие классы элементов для генерирования логики c путем обхода DOM из элемент, который вызвал событие click, чтобы найти связанные с ним. Использование этого шаблона означает, что один обработчик событий будет работать для бесконечного числа элементов.

В вашем случае вы можете достичь этого с помощью метода next(), поскольку целевой элемент является родственным элементом * 1007. * который поднимает событие. Попробуйте это: 

$('.video-cover').on('click', function(e) {
  e.preventDefault();
  $(this).fadeOut(400).next('.video-frame').prop('src', (i, src) => src += '?autoplay=1');

  // alternative:
  // $(this).fadeOut(400).next('.video-frame')[0].src += '?autoplay=1';
});
...