Javascript 用jQuery清空一个div，然后把它放回去？

我设置了一个带有视频的div，这样当我单击播放按钮（

.video play container

）时，视频会淡入，然后当我单击关闭按钮（

.close video

）时，视频会淡出。问题是，当视频淡出时，它仍在后台播放。因此，我用这一行（

'$（.youtube player'）.attr（'src'，''）；

）清空了

src

）。然而，如果用户不需要再次观看视频，这将是一件好事。但是如果他想打开视频备份，

src

现在是空的，所以他看不到视频。在我取出

src

后，如何恢复它，以便用户可以多次观看视频

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(500);
    $('.overlay').fadeIn(500).show();
    $('#feat-video').fadeIn(500).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(500);
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(500);
    $('.video-play-container').show().fadeIn(500);
});

编辑：更新代码

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(2000);
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', src);
});

编辑：更新代码2

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.overlay').fadeOut(2000);
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', '');
    $('.youtube-player').attr('src', src);
});

编辑：更新代码3

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.overlay').fadeOut(2000, function() {
        $('.youtube-player').attr('src', '');
    });
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', src);
});

编辑：更新代码4（最终版）

---

这基本上是一个定义，但如果你坚持。。。要保存和恢复属性

var src;
src = $('.youtube-player').attr('src');
$('.youtube-player').attr('src', '');
// do something else
$('.youtube-player').attr('src', src);

要保存和还原标记的内容

var html;
html = $('.youtube-player').html();
$('.youtube-player').empty();
// do something else
$('.youtube-player').html(html)

编辑：

• 你为什么不在淡出结束时杀死玩家
• 我这样做了（你可以在上面更新的代码中看到），但它看起来仍然有闪烁

你没有那样做<代码>隐藏（2000）是异步的。它将淡入队列，然后立即清除

src

，并立即将其放回队列。因此，当视频消失，然后开始重新加载时，闪烁会在淡入淡出完成之前发生。您想在

隐藏
上使用动画结束回调：

$('.overlay').fadeOut(2000, function() {
  $('.youtube-player').attr('src', '');
  // ...
});

要直接回答您的问题：

使用Jquery将src存储在youtube播放器的data属性中

因此，您的代码应该是：

$('.video-play-container').click(function( e ){
    //Check if src is present, else fetches it in the data attribute of the element
    $('.youtube-player').attr('src') || $('.youtube-player).attr('src',$(this).data('src'))
    e.preventDefault();
    $('.video-play-container').fadeOut(500);
    $('.overlay').fadeIn(500).show();
    $('#feat-video').fadeIn(500).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(500);
    //Stores the src in the data attribute before wiping the src clean.
    $('.youtube-player').data('src',$(this).attr('src'));
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(500);
    $('.video-play-container').show().fadeIn(500);
});

另一个建议是，如果你只有一个youtube播放器，就使用ID，而不是类。在同一页面上有多个会使上述代码出现错误。
它是隐藏的，但存在，因此出于各种原因仍在播放。看看“杰里米”是的，我就是这么想的。事实上，在过去的几个小时里，我一直在研究YT JS API，但我似乎无法理解这个概念。因此，我认为这将是一个更容易的修复方法（如果可能的话）。停止播放视频，或者将
.html（）
放入一个变量，然后使用
remove（）
。稍后再追加。使用
player.stopVideo（）：Void
@Jeremy我会使用API，但我的播放器在iframe中，看起来我必须将
？enablejsapi=1
附加到src的末尾。不幸的是，我不能直接改变它，因为它是一个插件，它将在下一次更新中消失。有没有一种方法可以通过jQuery将
？enablejsapi=1
附加到iframe src的末尾？这可能会导致页面的双重访问（不是很大的问题，但需要更多的工作）。除此之外，如果它最终加载到iframe中，那么无论如何你都无法控制里面的内容，所以它将是徒劳的。如果一个插件只是将一个iframe加载到HTML中，我会用我自己的代码替换这个插件。。。插入我自己的iframe并不难，对吧？谢谢。我看到了第一块代码背后的逻辑，仅仅使用它就可以实现我所需要的，但是第二块是做什么的呢？什么标签？我也需要包括这个吗？我不知道你的HTML的结构。您的问题正文要求采用第一种方法（“如何恢复
src
？”），而您的问题标题要求采用第二种方法（“清空一个div，然后放回去？”）；因此，以防万一，我为这两个问题提供了答案。然而，这两个问题实际上都不是正确的，Jeremy Miller回答的问题（“隐藏视频时如何停止播放？”或“如何动态加载和卸载youtube视频？”）：）请小心：如果您有多个
.youtube播放器
，上述代码将无法工作。抱歉，无法查看，淡出的速度太快，无法察觉。什么会变得波涛汹涌？@Amadan我让淡出的速度稍微慢了一点，这样你就能有更好的想法。基本上，当我点击关闭按钮时，我看到一个快速闪烁（我猜这是src被清空了），然后它消失了。我把你的代码加入了原始代码，你可以在上面的帖子中看到。
$('.video-play-container').click(function( e ){
    //Check if src is present, else fetches it in the data attribute of the element
    $('.youtube-player').attr('src') || $('.youtube-player).attr('src',$(this).data('src'))
    e.preventDefault();
    $('.video-play-container').fadeOut(500);
    $('.overlay').fadeIn(500).show();
    $('#feat-video').fadeIn(500).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(500);
    //Stores the src in the data attribute before wiping the src clean.
    $('.youtube-player').data('src',$(this).attr('src'));
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(500);
    $('.video-play-container').show().fadeIn(500);
});