jquery - 动态点击功能，自动生成ID

Question

我有以下 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)。因此，当您单击图像时，封面就会消失并自动播放视频。

我的问题是，事实上代码是通过短代码动态添加的，并且页面上有多个视频，我无法成功使点击操作(删除图像并播放每个视频)正常工作。

自动为每个视频条目添加ID的JS代码:

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

移除封面并播放视频的JS代码:

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

如果只有一个视频，点击功能可以正常工作。两个脚本都可以工作，但彼此不相关。如果视频更多，事情会变得更加复杂。所以我想做的是创建一个动态函数，生成并自动检测已点击的封面的 ID 与播放的 iframe 的 ID。

任何帮助将不胜感激，谢谢!

Answer 1

在运行时生成 id 属性是一种反模式，请勿这样做。

相反，使用元素上的通用类来通用化逻辑，方法是从引发单击事件的元素遍历 DOM 以查找与其相关的元素。使用此模式意味着单个事件处理程序将适用于无限数量的元素。

在您的情况下，您可以使用 next() 方法来实现此目的，因为目标元素是引发事件的 .video-cover 的同级元素。试试这个:

$('.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';
});