jQuery点击flipbook图标打开翻书效果旧内容不消失问题求助

该问题由两个核心原因导致：

• 关闭flipbook时未调用官方提供的实例销毁方法，仅隐藏了DOM元素，旧实例绑定的事件、生成的内部DOM节点、缓存数据全部残留
• 初始化新flipbook时未清空旧容器的内容，也未判断是否存在已存活的旧实例，导致新实例挂载失败、新旧内容重叠

1. 存储flipbook实例便于后续操作 #

初始化flipbook时将实例挂载到全局变量或者对应DOM的自定义属性上，示例代码：

// 初始化时存储实例
window.currentFlipbook = new Flipbook(container, {
  // 你的配置项
  pages: currentImageList
})

2. 关闭flipbook时执行完整销毁流程 #

关闭逻辑中新增销毁、清空步骤，不要仅做display: none隐藏：

function closeFlipbook() {
  // 先调用实例自带的destroy方法销毁内部事件、动画、缓存
  if (window.currentFlipbook) {
    window.currentFlipbook.destroy()
    window.currentFlipbook = null
  }
  // 清空容器内的所有子节点
  const flipContainer = document.getElementById('flipbook-container')
  flipContainer.innerHTML = ''
  // 最后再隐藏容器
  flipContainer.style.display = 'none'
}

3. 初始化新实例前增加前置校验 #

每次点击轮播图生成新flipbook前，先检查是否存在未销毁的旧实例，先执行销毁再初始化：

document.querySelectorAll('.carousel-image').forEach(img => {
  img.addEventListener('click', () => {
    // 先销毁旧实例，避免残留
    if (window.currentFlipbook) {
      closeFlipbook()
    }
    // 获取当前点击图片对应的图集数据
    const targetImageList = JSON.parse(img.dataset.imageList)
    const flipContainer = document.getElementById('flipbook-container')
    flipContainer.style.display = 'block'
    // 初始化新实例
    window.currentFlipbook = new Flipbook(flipContainer, {
      pages: targetImageList
      // 其他原有配置项
    })
  })
})

• 若使用框架封装的flipbook组件，可给组件绑定唯一key值（比如当前图集ID），强制切换图集时组件销毁重建
• 检查是否有全局绑定的翻页快捷键事件未在关闭时解绑，避免多次触发事件冲突

内容的提问来源于stack exchange，提问作者Mohammad Saad Hassan