哈利波特主题Quiz切换学院主题后页面刷新丢失状态的JS求助

开发了哈利波特宇宙主题的Quiz，支持开始前切换学院（Serpentard、Poufsouffle等）主题，但每次点击验证按钮加载新问题时，主题会重置，无法保存用户选择的主题。

核心问题分析 #

1. 每次加载新问题时，createQuestion函数生成的新DOM元素没有保留customizable类，导致主题样式无法绑定
2. 没有全局存储用户选中的主题，新元素创建后无法知晓要应用哪个学院样式

步骤1：全局保存用户选中的主题 #

修改主题切换函数，新增全局变量存储当前选中的学院，同时封装重复逻辑减少冗余：

// 新增全局变量存储当前主题
let currentHouseTheme = '';

// Allow to reset a theme :
function resetTheme() {
  document.querySelectorAll('.customizable').forEach(element => {
    element.classList.remove('Serpentard', 'Gryffondor', 'Poufsouffle', 'Serdaigle');
  });
}

function popUp() {
  // 封装主题切换通用逻辑
  function setHouseTheme(house) {
    resetTheme();
    currentHouseTheme = house;
    document.querySelectorAll('.customizable').forEach(element => {
      element.classList.add(house);
    });
  }

  // Logique Slytherin
  document.querySelector('#Serpentard').addEventListener('click', () => {
    setHouseTheme('Serpentard');
  })

  // Logique Ravenclaw
  document.querySelector('#Serdaigle').addEventListener('click', () => {
    setHouseTheme('Serdaigle');
  })

  // Logique Gryffondor
  document.querySelector('#Gryffondor').addEventListener('click', () => {
    setHouseTheme('Gryffondor');
  })

  // Logique Hufflepuff
  document.querySelector('#Poufsouffle').addEventListener('click', () => {
    setHouseTheme('Poufsouffle');
  })
}

// 导出主题变量供其他模块使用
export { popUp as default, currentHouseTheme };

步骤2：修复createQuestion函数，保留customizable类 #

确保新生成的问题元素带有customizable类，让主题样式能作用到这些元素上：

// CardQuestion :
function createQuestion(question) {
  let addQuestion =`
      <article class="question customizable">
        <fieldset class="listReponse customizable">
          <legend>${question.legend}</legend>

          <button class="answer-btn customizable" id="R1" name="answer">${question.R1}</button>
          <button class="answer-btn customizable" id="R2" name="answer">${question.R2}</button>
          <button class="answer-btn customizable" id="R3" name="answer">${question.R3}</button>
          <button class="answer-btn customizable" id="R4" name="answer">${question.R4}</button>

        </fieldset>
        
          <button id="validate">VALIDER</button>
        
      
      </article>`;
  
  return addQuestion;
}

export default createQuestion;

步骤3：加载新问题时应用保存的主题 #

在显示新问题的函数中，新增逻辑将全局保存的主题类应用到新生成的元素上：

import createQuestion from "./cardQuestion.js";
import questionsToAsk from "./questionsToAsk.js";
import displayPopup, { currentHouseTheme } from "./popUp.js"; // 导入主题变量

const QUESTIONS = document.querySelector(".blockQuestion");
const timerElement = document.getElementById('timer');
let currentQuestionIndex = 0;
let score = 0;
let timer;

// Display the question
function displayQuestion(index) {
    selectedAnswerId = null;
    QUESTIONS.innerHTML = createQuestion(questionsToAsk[index]);
    // 新增：如果有保存的主题，立即应用到新元素
    if (currentHouseTheme) {
      document.querySelectorAll('.customizable').forEach(element => {
        element.classList.add(currentHouseTheme);
      });
    }
    startTimer();
}

// 其余原有代码保持不变...

额外修复：HTML中的CSS链接错误 #

主页面HTML里的学院CSS路径缺少.css后缀，补上后才能正确加载样式：

<link rel="stylesheet" href="styleSerpentard.css">
<link rel="stylesheet" href="Serdaigle.css">
<link rel="stylesheet" href="Gryffondor.css">
<link rel="stylesheet" href="Poufsouffle.css">

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