iframe srcで置き換えるイメージをクリックすると、間違ったデータ属性が渡されます

Question

フィドル：https://jsfiddle.net/rg2LLvy1/どちらのイメージをクリックしても、正しいデータを渡すのではなく、最初のビデオのデータ - - 各画像に関連付けられたビデオ。例えば。 Catsの動画をクリックすると、iframeでSoccerの動画が再生されます。私はどこかに「これ」がないと思う？ありがとうございました！ここで

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

Answer 1

作業Working Demoです。

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

問題は、あなたがこのセレクタの2つの結果を持っていたので、あなたのセレクタ$('img.img-youtube').attr('data-video')はあなたに最初の値を与え、あなたはそれはあなたがクリックした画像に固有のものになりますのでthisを追加しなければならなかった理由ですということでした。

また、attr('data-video')の代わりにdata selectorを使用すると、JQueryを使用するだけで簡単に使用できます。

Answer 2

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