Starter 保留可操作的既有 jQuery 版當閱讀標本;Checkpoint 開始改用原生 JavaScript,Solution 不再啟用 jQuery handler。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 讀懂既有 jQuery 並建立原生事件入口 | DONE-01 | script.js | setupLegacyFaq() 責任對照與 setupNativeFaq() | querySelectorAll 與 addEventListener 只切換目前 FAQ |
| TASK-02 在原生事件中同步 aria-expanded | DONE-02 | script.js | 目前 button 的 setAttribute() | 展開、收合後的 aria 與 class 一致 |
| TASK-03 以原生 forEach 完成單開與再點收合 | DONE-03 | script.js | closeItem() 與點擊事件的其他 item 處理 | 開新題會關舊題,再點可收合,aria 不殘留 |
四階段差異
starter/:執行完整既有 jQuery 版,學生先操作、閱讀並標記責任。checkpoint-1/:停用 jQuery handler,改用querySelectorAll、addEventListener與classList.toggle()建立原生開關。checkpoint-2/:在同一個原生 handler 同步目前按鈕的aria-expanded。solution/:再補單開與收合回歸;既有 jQuery 函式只留作閱讀對照,不會被呼叫。
人工驗收
- Starter 的 jQuery 版可單開、收合,並正確同步 aria。
- Checkpoint 1 與 2 的狀態文字明確標示「原生遷移」,不是在原站再疊一個 jQuery handler。
- Solution 依序通過「開第一題→開第二題→再點第二題收合」,三題
aria-expanded都與畫面一致。