CHAPTER 19 · PRACTICE WORKSPACE

舊站維護：jQuery 與 FAQ 對照

能讀懂既有 jQuery FAQ，再將同一段行為遷移成原生 JavaScript，並維持單開、收合與 aria-expanded

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

讀懂既有 jQuery 並建立原生事件入口

修改檔案：script.js

完成後看見：querySelectorAll 與 addEventListener 只切換被點擊的 FAQ

TASK-02稍後處理

在原生事件中同步 aria-expanded

修改檔案：script.js

完成後看見：原生版的視覺開關與 aria-expanded 永遠一致

TASK-03稍後處理

以原生 forEach 完成單開與再點收合

修改檔案：script.js

完成後看見：開新題會關閉舊題，再點目前題可收合，aria 不殘留

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：讀懂既有 jQuery 並建立原生事件入口

修改：script.js

完成後：querySelectorAll 與 addEventListener 只切換被點擊的 FAQ

講解時展開：2 個小型比較

jQuery selector vs 原生 selector｜讀懂兩種入口

比較：兩種 API 都能找到元素，但要先分清既有 jQuery 責任與要建立的原生入口。

現在做：在 checkpoint-1/script.js 暫時把 document.querySelectorAll(".faq-question") 改成 document.querySelectorAll(".faq-item")，重新整理後點 FAQ 內容區，觀察事件入口已不只鎖定按鈕；恢復 selector 後再點第二題確認只有目標 item 改變。

看預期與證據

預期：改錯 selector 時，FAQ 內容區也可能觸發開合；恢復 .faq-question 後，只有按鈕 click 會切換目前 item，能說出 selector 決定事件入口的範圍。

證據：留下兩次操作紀錄：錯誤 selector 讓非按鈕區域也能觸發，恢復後只有 .faq-question 按鈕觸發；指出 document.querySelectorAll() 與 addEventListener() 各自負責什麼。

事件入口 vs FAQ 狀態｜先找到被點擊項目

比較：事件 handler 要針對目前被點擊的 FAQ，不應把所有項目一起打開。

現在做：在 checkpoint-1/script.js 暫時把 const currentItem = button.closest(".faq-item") 改成 const currentItem = document.querySelector(".faq-item")，重新整理後點第二題，觀察錯誤版本仍只改第一題；恢復 closest() 後再點第二題確認目前項目正確。

看預期與證據

預期：錯誤版本會把第二題的操作錯套到第一題；恢復 button.closest(".faq-item") 後，事件只切換被點擊的 FAQ，能說出 button 與 currentItem 的關係。

證據：留下點第二題時錯誤版本開第一題、修正後開第二題的前後紀錄，並指出 closest() 如何把事件入口帶回目前 FAQ item。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：先在 Starter 操作可運作的 jQuery 版，再打開 script.js 標記舊碼每一行責任。
  2. B｜預測：進入 Checkpoint 1，確認啟用的是 querySelectorAll、addEventListener 與 classList，依序點擊不同 FAQ。
  3. C｜實作：在 script.js 的 setupLegacyFaq() 責任對照與 setupNativeFaq() 完成「讀懂既有 jQuery 並建立原生事件入口」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 setupLegacyFaq() 責任對照與 setupNativeFaq() 與 script.js，最後重跑原操作。
  5. E｜驗收：querySelectorAll 與 addEventListener 只切換被點擊的 FAQ

完成條件：DONE-01：querySelectorAll 與 addEventListener 只切換被點擊的 FAQ

LEGACY MAINTENANCE

jQuery FAQ 修復

本課使用 jQuery 3.7.1 維護分支示範。

不是，它是包裝常見 JavaScript 操作的函式庫。

不一定，本課定位是讀懂與維護既有網站。

不會，下一課使用原生 fetch。

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「讀懂既有 jQuery 並建立原生事件入口」。

前往 Checkpoint 1：完成 TASK-01

CHAPTER HANDOFF

從 Timer 生命週期走到舊站維護

接收第 18 章：保留事件 → state → render 的讀碼方法；本頁是獨立 FAQ 練習，不共用第 18 章 Timer HTML。

交給第 20 章：完成後要能指出 querySelectorAll、addEventListener、closest、classList、aria-expanded 與單開規則；第 20 章會在獨立 API 頁接上 fetch 與四種非同步狀態，不重做本頁事件／DOM 基礎。