iframe src로 바꿀 이미지를 클릭하면 잘못된 데이터 속성이 전달됩니다.

Question

Fiddle : 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이다. 이 선택에 대한 2 개 결과를했기 때문에 당신의 선택 $('img.img-youtube').attr('data-video') 당신에게 첫 번째 값을 준

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

문제

이었고, 당신이 this 그래서 당신이 클릭 이미지에 특정 될 것입니다 추가했다 이유입니다.

또한 JQuery를 사용할 때 attr('data-video') 대신 data selector을 사용할 수 있기 때문에 더 쉽게 사용할 수 있습니다.

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); 
});