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

Question

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

当然，现在那个按钮挡住了路，不会识别点击事件。我怎么知道当您单击“播放”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>');

 });