javascript - 单击时将 html 存储到变量中，从 DOM 中删除并在另一次单击时将其放回

Question

我正在尝试为视频构建一个开/关按钮。我想要它做的很简单：第一次点击时，它会删除视频（而不是停止它），第二次，它会将它放回 dom。

我想出了一些代码，但它并没有按照我想要的方式工作：

$('#on-off').click(function(e) {
    e.preventDefault();
    if (videoContent !== ""){
        var videoContent = $('#video-container').html();
        console.log(videoContent);
            // At this point, the console shows the variable videoContent does contain the content of #video-container.
        $('#video-container').html("");
    }
    else {
        $('#video-container').html(videoContent);
    }
});

第一次单击工作正常并将#video-container 的内容存储到videoContent 中。但是，第二个不会将 videoContent 的内容放回#video-container。实际上，它擦除了 videoContent 的内容。

我确定这是很容易解决的问题，我只是想不通。谢谢

Answer 1

将变量videoContent放在全局范围内：

var videoContent = '';

$('#on-off').click(function(e) {
    e.preventDefault();
    if (videoContent !== ""){
        videoContent = $('#video-container').html();
        $('#video-container').html("");
    }
    else {
        $('#video-container').html(videoContent);
    }
});