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来禁用/启用所有插件。

在div中隐藏爆米花元素

1 个答案: