在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循環啓用所有插件。