Щелчок по изображению для замены 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.

$('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'), это просто облегчает жизнь.

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