为什么我的 JQuery 脚本没有用正确的 iframe 替换数据属性?

Question

我有三个视频有一个占位符图像。当用户单击图像占位符时，内部 HTML 将替换为 iframe 并播放视频。

起初，当您单击左侧的第一个视频时，它似乎工作正常。但是，如果单击其他占位符图像，(最后一个视频(视频将跨所有三个列表项重复。

任何帮助解决这个问题都是值得赞赏的。

代码笔：https://codepen.io/Al-76/pen/MWKQRbP

<ul class="video-examples-list">
<li>
<p>Dog running<p>
<div class="item">
<div class="responsive-iframe">
<div class="video">
<img src="https://via.placeholder.com/800x450" class="swap" data-video="https://www.youtube.com/embed/k-EPxNDCaeY?autoplay=1">
<div class="play"></div>
</div>
</div>
</div>
</li>
<li>
<p>Frogs Jumping<p>
<div class="item">
<div class="responsive-iframe">
<div class="video">
<img src="https://via.placeholder.com/800x450" class="swap" data-video="https://www.youtube.com/embed/KCtSxQDN37w?autoplay=1">
<div class="play"></div>
</div>
</div>
</div>
</li>
<li>
<p>Lambs Jumping<p>
<div class="item">
<div class="responsive-iframe">
<div class="video">
<img src="https://via.placeholder.com/800x450" class="swap" data-video="https://www.youtube.com/embed/OwxIzr7CbcQ?autoplay=1">
<div class="play"></div>
</div>
</div>
</div>
</li>
</ul>

我的JQuery代码如下;

$('.play').on('click', function(e) {
e.stopPropagation();
video = '<iframe frameborder="0" src="' + $('img.swap').attr('data-video') + '" allowfullscreen></iframe>';
$(this).parent('.video').replaceWith(video);
});

Answer 1

>$('img.swap').attr('data-video')将始终获取集合中找到的第一个元素的值

需要使用遍历方法将实例定位在与按钮相同的容器中。您可以通过多种方式穿越那里

尝试更改为

$(this).siblings('img.swap').attr('data-video')
// OR
$(this).prev().attr('data-video')
// OR 
$(this).closest('.video').find('img.swap').attr('data-video')
// OR 
$(this).parent().find('img.swap').attr('data-video')

Answer 2

在您的代码中，$('img.swap').attr('data-video')将使用类swap获取第一个图像的所需吸引力。要让你的代码找到同级img.swap，你可以使用 jQuery 的siblings()：

video = '<iframe frameborder="0" src="' + $(this).siblings('img.swap').attr('data-video') + '" allowfullscreen></iframe>';

其中this指向具有类play的单击的div .

旁注：当您从左到右依次单击三个div 时，它似乎有效的原因是因为在单击第一个div 后，您将用 iframe 替换父节点，删除第一个img.swap。因此，在下一次调用事件处理程序时，只剩下两个img.swap：第二个和第三个，因此$('img.swap').attr('data-video')现在将引用第二个视频。