在div中隐藏爆米花元素

Question

因此，使用popcorn.js指定脚注等将填充的div。但是，如果您有多个视频使用相同的div来表示脚注，但在脚注弹出时切换视频时，它仍保留在div中，下一个元素将置于其下方，而不是替换它。我无法使用.html（''），因为所有元素实际上总是存在，只是按顺序显示和隐藏。无法隐藏整个div。 想法？

Answer 1

至少有几种方法可以做到这一点。

一种选择是在同一div内创建两个div，每个div的CSS样式为position: absolute，父div为position: relative。两个div将相互重叠，并且可以让每个div都成为不同Popcorn实例中所有脚注的目标。当您在两个视频之间切换时，请在隐藏视频的div上设置display: none，并将其清除为可见视频。

我经常用这种东西的另一招是使用.disable。这将隐藏所有爆米花实例的脚注。事情是这样的：

function activateVideo(index) { 
    if (activePopcorn) { 
     activePopcorn.disable('footnote'); 
     //todo: make this video invisible. 
    } 

    activePopcorn = popcornInstances[index]; 
    activePopcorn.enable('footnote'); 
    //todo: make this video visible. 
    //(don't forget to range check) 
} 

如果你愿意，你可以禁用/通过Popcorn.registryByName循环启用所有插件。