具有自动生成 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>

为了使设计更具吸引力，用户可以在视频上添加自己的封面 (class 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();
});

如果只有一个视频，点击功能可以正常使用。这两个脚本都在工作，但彼此不相关。如果有更多视频，事情就会变得更复杂。所以我想做的是创建一个动态函数，生成并自动检测与 iframe 播放的 ID 相关的已单击封面的 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';
});

具有自动生成 ID 的动态点击功能

Dynamic click function with auto generate IDs

jquery

function

click

each