讀懂既有 jQuery 行為
能把選取、事件、目前項目、class 與 aria 逐行說成畫面責任。
CHAPTER 19 · 120 MINUTES
舊站維護：jQuery 與 FAQ 對照
本章使用課次 19 後 120 分鐘，先操作與讀懂可運作的 jQuery FAQ，再把同一段行為遷移成原生 JavaScript，並以單開、收合與 aria 做回歸。
1段舊碼閱讀
1段原生遷移
3條回歸證據
LEARNING GOALS
本章結束時，你能做出什麼
遷移成原生 JavaScript
真正使用 querySelectorAll、addEventListener 與 classList，不是再補一個 jQuery handler。
保留行為契約
原生版必須通過單開、再點收合與 aria-expanded 不殘留的回歸。
進場檢核與作品接力
- 具備第 18 章成果：remainingSeconds 經 renderTimer() 顯示，timerId 能防止重複 interval，開始／暫停／重設生命週期完整：不看答案，開始後快速連按仍每秒只扣一、暫停後秒數保留、重設回 10 秒且顯示「尚未開始」，並指出 stopTimer() 的清理責任。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 18 章產物：remainingSeconds → renderTimer() 的獨立倒數頁，timerId 防重複 interval，開始／暫停／重設與歸零清理均已驗收；本章改在獨立 FAQ 頁閱讀相同的事件 → state → DOM 責任，不共用 timer HTML
本章輸出：能讀懂既有 jQuery FAQ，再將同一段行為遷移成原生 JavaScript，並維持單開、收合與 aria-expanded
產物類型：extension；後續用途：第 20 章
PROBLEM & ANALOGY
先理解責任，再寫語法
維護 jQuery 像閱讀舊版操作手冊：先辨認它把哪些原生步驟縮寫，再在既有系統內做最小修復，不為了練習整站重寫。
本章要解決：本章使用課次 19 後 120 分鐘，沿著舊碼行為閱讀、原生 JavaScript 責任對照、遷移一段 FAQ 功能與回歸驗收前進。
接住上一章：第 18 章已驗收事件 → state → render 與生命週期清理；本章把同一讀碼方法帶進獨立 FAQ 頁，不直接重用 Timer HTML。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- jQuery $
- 舊站常見的選取與事件包裝，本章先讀懂再替換。
- querySelectorAll
- 原生取得多個 FAQ 元素的入口。
- addEventListener
- 原生綁定點擊事件。
- aria-expanded
- 把展開或收合狀態告訴輔助技術。
- forEach
- 逐一處理 FAQ，才能關閉其他題目。
SCOPE
今天的學習邊界
能自己完成
讀懂 jQuery 選取與事件寫法；只切換目前 FAQ item 狀態；維持單開模式與 aria-expanded。
看得懂即可
能把 $()、.on()、.closest() 對照到 querySelector、addEventListener、closest。
刻意延後
不教新專案導入 jQuery、jQuery 動畫或 AJAX；API 從下一章使用原生 fetch。
本章術語：jQuery、selector、.on()、this、.closest()、toggleClass。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
先讀行為，再對照責任與遷移
- jQuery 是函式庫，不是另一種語言；核心仍是事件、DOM 與狀態。
this是被點擊按鈕，先 closest 到目前 item，避免全部一起開。- 畫面 class 與 aria-expanded 必須同步，不能只讓視覺看起來正確。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：把事件內目標寫成 $('.faq-item')，點一題全部展開；在 Elements 觀察所有 class 同時變化，再改成 $(this).closest('.faq-item')。
$ is not defined：先檢查本機assets/vendor/jquery-3.7.1.min.js是否載入及 script 順序；離線時確認相對路徑與檔案存在。- 點一題全開：檢查是否從
this找目前 item。 - 畫面收合但 aria 還是 true：在每次狀態改變後同步屬性。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
點一題全部打開
先查：檢查處理的是被點擊元素，不是全部一起切換。
畫面開了但 aria 不對
先查：把視覺 class 與 aria-expanded 放在同一次更新。
單開或再點收合失效
先查：確認先關閉其他題，再反向切換目前題。
PRACTICE CONTRACT
從可運作舊碼，遷移成可回歸的原生版
開始前先確認這四件事
- 我先讀懂 jQuery 版本的選取、改變與時機。
- 原生版本保留同一份 HTML 與可及性責任。
- 我會同時檢查畫面 class 與 aria-expanded。
- 我會測試開新題與再點目前題。
讀懂既有 jQuery 並建立原生事件入口
檔案：script.js
位置：setupLegacyFaq() 責任對照與 setupNativeFaq() 的 click handler（TASK-01 區塊）
結果：querySelectorAll 與 addEventListener 只切換被點擊的 FAQ
在原生事件中同步 aria-expanded
檔案：script.js
位置：setupNativeFaq() 內目前 button 的 setAttribute()（TASK-02 區塊）
結果：原生版的視覺開關與 aria-expanded 永遠一致
以原生 forEach 完成單開與再點收合
檔案：script.js
位置：closeItem() 與 click handler 的其他 item 處理（TASK-03 區塊）
結果：開新題會關閉舊題，再點目前題可收合，aria 不殘留
EVIDENCE
遷移證據與回歸檢核
30 秒說法可以直接照這個句型練習：
舊版用 ______；原生版改用 ______；視覺狀態與 aria-expanded 都由 ______ 同步更新。
移除 jQuery 不是把行為改掉；要以既有功能、單開與可及性回歸驗收。
提交舊 jQuery 責任表、原生遷移差異，並現場通過「開第一題→開第二題→再點第二題收合」。
下一章：第 20 章回到原生 JavaScript，處理 API、JSON 與非同步狀態。