用jQuery清空一个div，然后放回

Question

我有一个带有视频的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');
$('.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', '');
        $('.youtube-player').attr('src', src);
    });
    $('.video-play-container').show().fadeIn(2000);
});

Answer 1

这几乎是XY问题的定义，但如果你坚持。。。要保存和恢复属性，

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)

编辑：

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

你做了而不是那样做。hide(2000)是异步。它会将淡入淡出放入队列，然后会立即清除src并立即将其放回。因此，闪烁，随着视频消失，然后开始重新加载，所有这些都在渐变完成之前。您想在hide:上使用动画结束回调

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

Answer 2

直接回答您的问题：

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

因此，您的代码将是：

$('.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，而不是类。在同一页上有几个会使上面的代码有缺陷。