具有自动生成ID的动态点击功能
具有自动生成ID的动态点击功能
提问于 2020-02-03 18:51:45
我有下面的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，该ID与播放的iframe的ID相关。
任何帮助都将不胜感激，谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-03 18:55:55
在运行时生成id属性是一种反模式，请不要这样做。
相反，可以使用元素上的公共类来泛化逻辑，方法是遍历引发单击事件的元素的DOM，以查找与之相关的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';
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60037733
复制相关文章
相似问题
腾讯云开发者
