STEP GUIDE · Checkpoint 2

這個步驟要做什麼、改哪裡、怎麼看結果

這一步聚焦 TASK-02；下方只比較「Checkpoint 1 → Checkpoint 2」的真實異動。

01

三項 Task 進度

TASK-01已完成

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

預計修改：script.js

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

TASK-02本步驟處理

在原生事件中同步 aria-expanded

預計修改：script.js

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

TASK-03稍後處理

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

預計修改：script.js

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

02

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟無異動

檔案：index.html

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
CSS本步驟無異動

檔案：style.css

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
JavaScript本步驟有異動

檔案：script.js

修改前

      currentItem.classList.toggle("is-open");
implementationStatus.textContent = "Checkpoint 1：已停用 jQuery handler，目前執行原生遷移版。";

修改後

      const willOpen = !currentItem.classList.contains("is-open");
      currentItem.classList.toggle("is-open", willOpen);
      button.setAttribute("aria-expanded", String(willOpen));
implementationStatus.textContent = "Checkpoint 2：原生遷移版已同步目前題的 aria-expanded。";
README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
03

怎麼看到結果

  1. 準備

    先重新整理 Checkpoint 2，並在 DevTools Elements 選取一個 FAQ 按鈕。

  2. 操作

    重複展開與收合同一題，每次對照 is-open 與 aria-expanded。

  3. 預期

    原生版的視覺開關與 aria-expanded 永遠一致
Checkpoint 2 TASK-02

在原生事件中同步 aria-expanded

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

LEGACY MAINTENANCE

jQuery FAQ 修復

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

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

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

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