前言

今天的目標是解決昨天功能尚未完善的地方。就是當網頁重新啟動時，我昨天設定的效果並不會立刻顯示在網頁上，而是只有在點擊選項後才會看到設定的效果。為了解決這個問題，我需要修改 setSetting() 方法。

解決重新啟動網頁的問題

首先，我先建立映射物件，映射物件是用將來存取值映射到對應 HTML 元素上的。映射物件包含主題映射、字體映射和字體大小映射，以下為相關程式碼：

themeMap = {
    "default-theme": "defaultThemeButton",
    "light-theme": "lightThemeButton",
    "night-theme": "nightThemeButton",
    "nature-theme": "natureThemeButton",
};

fontMap = {
    defaultFont: "defaultFont",
    font1: "font1",
    font2: "font2",
    font3: "font3",
};

fontSizeMap = {
    "default-font-size": "mid",
    "small-font-size": "small",
    "large-font-size": "large",
};

接著，我新增一個 setMappedValue() 方法，它會根據映射將 selected 效果應用到 HTML 元素上。這個方法首先會找到對應的 HTML 元素，然後為 HTML 元素添加 selected 類別，用來顯示選中效果。以下為相關程式碼：

setMappedValue(mapping, value, menuId) {
    const menu = document.querySelector(`#${menuId}`);

    if (mapping[value]) {
      const liElement = document.querySelector(`#${mapping[value]}`);
      if (liElement) {
        // 移除所有li元素的selected類別
        menu.querySelectorAll("li").forEach((li) => {
          li.classList.remove("selected");
        });

        // 添加selected類別給當前點擊的li
        liElement.classList.add("selected");
      } else {
        console.log(`No matching li element found for value: ${value}`);
      }
    } else {
      console.log(`No mapping found for value: ${value}`);
    }
}

我來解釋一下上述方法：

1. 使用 document.querySelector 找尋特定 ID 的 HTML 元素。在這裡，我要找的是 <ul> 元素，例如：<ul class="sub-setting-list" id="themeMenu">
2. 檢查 mapping 物件中是否找的到 key 為 value 的值
3. 如果 mapping[value] 存在的話，就使用 document.querySelector 抓取有 mapping[value] 的 HTML 元素，這裡要找的是 <li> 元素。
4. 如果找到 <li> 元素，就先將所有的 selected 類別移除，然後將 selected 類別添加到當前的 <li> 元素上。

P.S. 在設定映射物件時有一點需要注意，就是 key 值若是有 "-" 的話，要為整個 key 值加上 "" 才能順利執行程式。

GitHub

github: ThemeTasker code