单击图像以替换为 iframe src 传递了错误的数据属性

Question

Fiddle：https://jsfiddle.net/rg2LLvy1/ 几乎可以正常工作，但是单击任一图像都会传入第一个视频的数据视频属性，而不是传入与 "correct" 相关的数据视频每个图像。例如。如果您点击 Cats 视频，iframe 会播放 Soccer 视频。我想我在某处缺少 'this' ？谢谢！

$('img.img-youtube').parent().click(function(){
video = '<iframe src="'+ $('img.img-youtube').attr('data-video') +'"></iframe>';
    $(this).parent().replaceWith(video);
});

Answer 1

$('img.img-youtube').parent().click(function(e){
console.log($(this).find("img").attr('data-video'));
    video = '<iframe src="'+ $(this).find("img").attr('data-video') +'"></iframe>';
    $(this).parent().replaceWith(video);
});

Answer 2

这是一个有效的 Working Demo。

$('img.img-youtube').parent().click(function(){
    video = '<iframe src="'+ $(this).find('img.img-youtube').data('video') +'"></iframe>';
    $(this).parent().replaceWith(video);
});

问题是您的选择器 $('img.img-youtube').attr('data-video') 给了您第一个值，因为您有 2 个结果用于此选择器，这就是为什么您必须添加 this 以便它特定于图像你点击了。

此外，在使用 JQuery 时，您可以使用 data selector 而不是 attr('data-video') ，这只会让生活更轻松。

单击图像以替换为 iframe src 传递了错误的数据属性

Clicking on image to replace with iframe src is passing in the wrong data-attribute

jquery

parent

this

replacewith