CHAPTER 19 · PRACTICE WORKSPACE

舊站維護:jQuery 與 FAQ 對照

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

03 Checkpoint 2 2/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-02;先核對可見結果,再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理:以原生 forEach 完成單開與再點收合

修改:script.js

完成後:開新題會關閉舊題,再點目前題可收合,aria 不殘留

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

forEach 全部處理 vs 單開規則

比較:走訪所有 item 是實作手段,單開是互動規則;開新題前要先關閉其他題。

現在做:在 solution/script.js 暫時註解 items.forEach((item) => { if (item !== currentItem) closeItem(item); });,重新整理後依序開第一題、開第二題,觀察兩題同時開啟;恢復 forEach 後重跑同一矩陣。

看預期與證據

預期:移除 forEach 時會失去單開規則;恢復後開第二題會先關第一題,且所有被關閉題目的 aria-expanded 都回到 false。

證據:留下移除/恢復 forEach 的前後狀態表,至少記錄兩題的 class 與 aria-expanded,並說出 forEach 是實作手段、單開是行為規則。

closeItem vs toggle|開新題與再點收合

比較:開新題要關閉舊題,再點目前題則可收合;兩條路徑都要驗收 aria 狀態。

現在做:在 solution/script.js 暫時把 currentItem.classList.toggle("is-open", willOpen) 改成 currentItem.classList.add("is-open"),重新整理後連點同一題,觀察它無法收合;恢復 toggle 後再跑開第一題、開第二題、再點第二題。

看預期與證據

預期:只使用 add 時,再點目前題仍保持開啟;恢復 toggle(..., willOpen) 後才同時支援開新題關舊題與再點目前題收合。

證據:記錄同一題連點在錯誤/修正版的 class 與 aria-expanded,並補一輪換題操作,證明開新題與再點收合是兩條都要驗收的路徑。

需要排錯時查看:任務循環(觀察 → 預測 → 實作 → 故障 → 驗收)
  1. A|觀察:重新整理 Solution,並保持 DevTools Elements 可同時查看前後兩題按鈕。
  2. B|預測:先開第一題,再開第二題,最後再點第二題收合;核對所有 class 與 aria-expanded。
  3. C|實作:在 script.js 的 closeItem() 與點擊事件的其他 item 處理 完成「以原生 forEach 完成單開與再點收合」,一次只處理本任務責任。
  4. D|故障:若結果不一致,先依原操作重現,再檢查 closeItem() 與點擊事件的其他 item 處理 與 script.js,最後重跑原操作。
  5. E|驗收:開新題會關閉舊題,再點目前題可收合,aria 不殘留

完成條件:DONE-03:開新題會關閉舊題,再點目前題可收合,aria 不殘留

LEGACY MAINTENANCE

jQuery FAQ 修復

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

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

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

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

CONTINUE

繼續完成 TASK-03

前往 Solution,依要求完成「以原生 forEach 完成單開與再點收合」。

前往 Solution:完成 TASK-03

CHAPTER HANDOFF

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

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

交給第 20 章:完成後要能指出 querySelectorAlladdEventListenerclosestclassListaria-expanded 與單開規則;第 20 章會在獨立 API 頁接上 fetch 與四種非同步狀態,不重做本頁事件/DOM 基礎。