单击 div 隐藏 div 并替换另一个

Question

我正在尝试创建一个视频播放器，如果您单击图片，它会将图片换成 YouTube 视频。代码工作正常，直到我想在顶部放置一个 div 作为播放器按钮。

当然，现在那个按钮挡住了路，无法识别点击事件。我怎么知道当你点击 "play" div 时它会隐藏 div 并将另一个 div 图像换成 youtube 视频。

代码如下：

$(document).ready(function(){
    $('#play').click(function(){
        $('#play').hide();
        $('img').function () {
            video = '<iframe src="' + $(this).attr('data-video') + '" width="100%" height="100%" frameborder="0"></iframe>';
            $(this).replaceWith(video);
    });
});

我对 jQuery 还是很陌生，不完全了解布局和函数调用的工作原理。您的见解真的很有帮助！

谢谢:)

Answer 1

给你：

http://jsfiddle.net/tvyfxey6/6/

 $('#play').on('click', function(evt) {
         alert('click'); 
     $('#play').hide();
      $('#img').hide();
     $('#video').html('<iframe src="' + $('#video').attr('data-video') + '" width="100%" height="100%" frameborder="0"></iframe>');

 });

单击 div 隐藏 div 并替换另一个

Clicking a div hides div and replaces another

javascript

jquery

html

css

youtube