求助：将书本翻页hover动画改为JS点击触发CSS类切换失效

以下是几个实用的排查方向和解决方案，按顺序检查即可：

1. 确保DOM加载完成后再绑定事件 #

如果你的JS代码写在<head>里或页面元素之前，会出现找不到.book11元素的情况，直接导致事件绑定失败。

解决方式：把JS代码放在<body>标签末尾，或者用DOMContentLoaded包裹：

document.addEventListener('DOMContentLoaded', function() {
  const book = document.querySelector('.book11');
  // 先确认元素是否存在
  if (!book) {
    console.error('未找到.book11元素，请检查选择器拼写');
    return;
  }
  book.addEventListener('click', function() {
    // 注意：如果.cover11是.book11的子元素，要切换子元素的类
    this.querySelector('.cover11').classList.toggle('cover11__open');
    // 如果是直接给.book11加类，就用 this.classList.toggle('cover11__open');
  });
});

2. 检查CSS类的优先级与拼写 #

• 类名拼写要完全一致：比如cover11__open不要写成cover11-open或出现大小写错误。
• 确保.cover11__open的样式优先级足够覆盖初始样式：
  若初始样式是.cover11，展开样式需要用组合选择器提升优先级：

.cover11 {
  transform: rotateY(0deg);
  transition: transform 0.6s ease;
  /* 其他初始样式 */
}

/* 组合选择器提升优先级，避免被初始样式覆盖 */
.cover11.cover11__open {
  transform: rotateY(-180deg);
  /* 其他展开样式 */
}

3. 排查元素是否动态生成 #

如果.book11是通过JS动态添加到页面的（比如ajax加载、框架渲染生成），直接绑定事件会失效，需要用事件委托：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定到静态父元素（比如body，或更接近的固定父容器）
  document.body.addEventListener('click', function(e) {
    // 判断点击的元素是否是.book11（或其子元素）
    const book = e.target.closest('.book11');
    if (book) {
      book.querySelector('.cover11').classList.toggle('cover11__open');
    }
  });
});

4. 用浏览器工具快速验证 #

• 按F12打开开发者工具，切换到Console面板，查看是否有报错信息（比如元素不存在）。
• 点击.book11后，切换到Elements面板，查看目标元素的class列表是否有变化。
• 在Styles面板中，查看.cover11__open的样式是否被划掉（划掉说明优先级不够）。

内容的提问来源于stack exchange，提问作者Ragnarino