第 23 堂｜用證據修好三種常見故障
圖片、選單、手機溢出，各自重現、修一處、再回歸。
網址要從目前檔案位置計算
同一張原圖恢復，其他資料及圖片不變。
先準備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 01-image-path的projects.js第一筆image、素材清單與404
JS產生的圖片也有實際src。先對照data中的image、實際assets清單與Network404，不用換另一張圖掩蓋路徑錯誤。
先分清自己的作品、線上畫面與可啟動參考包；本堂是靜態作品除錯，參考包不需要案件後端，依OPEN_REFERENCE.html操作即可。
一起拆解：從資料找到真正圖片路徑
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
works.html由projects.js渲染；首筆brand-01的image誤寫assets/stress-portrait-missing.png，實際檔案是assets/stress-portrait.png。
// projects.js首筆資料，只改image
image: "assets/stress-portrait.png"
// 圖片網址從works.html的portfolio目錄解析這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先記Network的404、目前works.html位置與projects.js的首筆image。
- 對照自己的assets清單，只修該筆image，不改alt或借別堂圖片。
- 重整後核對請求成功、原圖片完整及其他資料保留，再記這項故障證據。
正常應看到
資料渲染的首張圖片恢復，alt與作品內容保留。
常見錯誤對照
只在HTML另加一張img，原projects.js重新渲染後仍會產生錯誤圖片。
先預測，再說明原因
為何這堂應改projects.js的image，而不是直接到HTML找固定img？
跟著觀察
- 先讀「從目前HTML計算圖片位置」的輸入，指出本關實際檔案或資料。
- 如果把HTML搬進pages資料夾，相對路徑為何可能需要改？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 同一張原圖恢復，其他資料及圖片不變。
- 能指出指定檔案與作用範圍。
先把圖片找回來
同一張原圖恢復，其他資料及圖片不變。
先準備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 01-image-path的projects.js第一筆image、素材清單與404
親手在故障副本記一筆破圖、實際src及同層素材清單。
跟著做
- 解壓fault包，三個故障各有獨立portfolio，先開01-image-path。
- 請AI定位一筆資料的image錯名，僅修該路徑。
- 重新載入、核對原圖與alt，其他六圖、搜尋分類及服務入口保留。
用證據修復一張圖片路徑
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 01-image-path的projects.js第一筆image、素材清單與404
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 請AI定位一筆資料的image錯名，僅修該路徑。
- 有問題單、最小diff及重新載入結果。
- 4．自己檢查結果
- 同一張原圖恢復，其他資料及圖片不變。
- 有問題單、最小diff及重新載入結果。
用證據修復一張圖片路徑 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第14堂完整作品集（三頁、服務內容、案例、7筆JS作品、搜尋分類與手機選單）。提供三個獨立故障portfolio：一張圖片路徑錯、一次重複click、第一張卡片固定400px。start與各checkpoint為同一乾淨基準，分別供修完該故障比對；不是額外加新功能或學生已驗收。
本次任務：只處理獨立01-image-path/portfolio：第一筆projects資料image錯寫assets/stress-portrait-missing.png，實際原圖assets/stress-portrait.png存在。先依附src、404與檔案清單說原因，再只把第一筆image改回原直幅圖；不換圖片、不改alt、文字、資料順序或其他路徑。提供最小diff及重新載入後檢查原圖、全部7卡片、分類搜尋、320/768/1280與服務入口清單；檢查結果由我實際填，不替我生成通過。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
做完，自己確認
- 同一張原圖恢復，其他資料及圖片不變。
- 有問題單、最小diff及重新載入結果。
本堂是靜態作品除錯，不需要案件後端。下載本關完整參考後，依 OPEN_REFERENCE.html 啟動自己的預覽；不要覆蓋正常作品。
下載本關靜態參考包事件重複綁定不是動畫問題
手機每次點擊只切換一次，ARIA同步。
先準備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 02-duplicate-event/navigation.js、一次點擊與ARIA證據
重複匿名click監聽使選單在一次點擊中開又關。保留一個正確監聽，不能用延遲遮掩。
一起拆解：一次操作有兩個監聽器
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
手機選單按一次先開又關；故障JS重複註冊同個click動作。
一次click → toggle() → open
同次click → toggle() → closed這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先記按前後aria-expanded，核對script載入次數與事件綁定。
- 只移除重複註冊，不用setTimeout或強迫保持打開。
- 用滑鼠、Enter、Space及Escape重驗正常一次開關。
正常應看到
一次動作只觸發一次狀態變更，鍵盤同步。
常見錯誤對照
用動畫延遲遮住第二次toggle，仍留下重複事件。
先預測，再說明原因
為何只看動畫速度，不能判定事件是否綁了兩次？
跟著觀察
- 先讀「一次操作有兩個監聽器」的輸入，指出本關實際檔案或資料。
- 為何只看動畫速度，不能判定事件是否綁了兩次？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 手機每次點擊只切換一次，ARIA同步。
- 能指出指定檔案與作用範圍。
一次點擊，只切換一次
手機每次點擊只切換一次，ARIA同步。
先準備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 02-duplicate-event/navigation.js、一次點擊與ARIA證據
自己記一次點擊前後aria-expanded及重複監聽的位置。
跟著做
- 改開獨立02-duplicate-event，手機按選單重現。
- 請AI只移除注入的重複click監聽。
- 用Enter/Space/Escape、同頁連結、跨頁及桌面重新確認。
修復重複的手機選單事件
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 02-duplicate-event/navigation.js、一次點擊與ARIA證據
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 請AI只移除注入的重複click監聽。
- Enter/Space/Escape與三頁導覽仍可使用。
- 4．自己檢查結果
- 手機每次點擊只切換一次，ARIA同步。
- Enter/Space/Escape與三頁導覽仍可使用。
修復重複的手機選單事件 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第14堂完整作品集（三頁、服務內容、案例、7筆JS作品、搜尋分類與手機選單）。提供三個獨立故障portfolio：一張圖片路徑錯、一次重複click、第一張卡片固定400px。start與各checkpoint為同一乾淨基準，分別供修完該故障比對；不是額外加新功能或學生已驗收。
本次任務：只修獨立02-duplicate-event/portfolio/navigation.js中L10_FAULT_BINDING注入的第二個匿名click listener，保留原本監聽及setOpen。先說明同一點擊切兩次的證據，不改動畫、不加setTimeout或debounce、不重寫導覽。保留aria-expanded/hidden、Escape返回選單button、連結選取關閉、700px桌面導覽與其他三頁。提供最小diff並列真實鍵盤與手機/桌面回歸，AI不代替我點擊驗收。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
做完，自己確認
- 手機每次點擊只切換一次，ARIA同步。
- Enter/Space/Escape與三頁導覽仍可使用。
本堂是靜態作品除錯，不需要案件後端。下載本關完整參考後，依 OPEN_REFERENCE.html 啟動自己的預覽；不要覆蓋正常作品。
下載本關靜態參考包每項修復與無關修改分開
320px沒有水平溢出，未隱藏或刪除內容。
先準備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 03-fixed-card/樣式來源、320px元素寬度、自己的git diff
第三份故障只在第一張卡片固定400px。最小修復後，用Git對照一項自己加入的無關CSS改動，僅回復該項，不清掉有效修正。
一起拆解：修復與無關修改分開
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
本堂三故障分開；已修圖片與事件，再處理固定400px卡片。
保留：已驗證的圖片／事件修復
移除：本次400px故障區塊
回復：不相關的字型或色彩修改這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先對自己的diff分類，保留前兩個有效修復。
- 只修本故障造成的固定寬度，不以overflow:hidden掩蓋。
- 重驗圖片、事件及三尺寸，再交各故障的原因與最小差異。
正常應看到
三項各有重現與修復證據，沒有混入無關改版。
常見錯誤對照
整份檔案回復到未修版本，可能把已完成的兩項也丟掉。
先預測，再說明原因
打算回復CSS前，應先看哪份差異？
跟著觀察
- 先讀「修復與無關修改分開」的輸入，指出本關實際檔案或資料。
- 打算回復CSS前，應先看哪份差異？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 320px沒有水平溢出，未隱藏或刪除內容。
- 能指出指定檔案與作用範圍。
修溢出，也保留已修好的部分
320px沒有水平溢出，未隱藏或刪除內容。
先準備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 03-fixed-card/樣式來源、320px元素寬度、自己的git diff
先記320px真正超寬元素；修後親手加入一項無關顏色改動，對照diff再只回復該項。
跟著做
- 開03-fixed-card重現，請AI依Computed定位。
- AI只移除固定寬度注入，自己核對diff與無關改動。
- 回歸三頁、7卡片、搜尋分類、選單與鍵盤；三份問題單保持分開。
最小修復並規劃局部回復
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 03-fixed-card/樣式來源、320px元素寬度、自己的git diff
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- AI只移除固定寬度注入，自己核對diff與無關改動。
- 有效修復保留、無關改動局部回復，三份證據分開。
- 4．自己檢查結果
- 320px沒有水平溢出，未隱藏或刪除內容。
- 有效修復保留、無關改動局部回復，三份證據分開。
最小修復並規劃局部回復 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第14堂完整作品集（三頁、服務內容、案例、7筆JS作品、搜尋分類與手機選單）。提供三個獨立故障portfolio：一張圖片路徑錯、一次重複click、第一張卡片固定400px。start與各checkpoint為同一乾淨基準，分別供修完該故障比對；不是額外加新功能或學生已驗收。
本次任務：獨立03-fixed-card只有CSS末端第一張.work-card width:400px。依附實際寬度與規則來源，只移除L23 isolated fault區塊，保留原網格/文字/圖片，不用overflow:hidden、!important或縮字。再閱讀我附的有效修復與無關顏色修改diff，只指出該回復哪一個無關hunk及保留哪個修復；不要替我執行git restore/reset/commit。命令若需提供先說檔案範圍，由我逐條核對操作。列320/768/1280、搜尋分類、選單、圖片及三頁回歸，三故障各留問題單。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
做完，自己確認
- 320px沒有水平溢出，未隱藏或刪除內容。
- 有效修復保留、無關改動局部回復，三份證據分開。
本堂是靜態作品除錯，不需要案件後端。下載本關完整參考後，依 OPEN_REFERENCE.html 啟動自己的預覽；不要覆蓋正常作品。
下載本關靜態參考包留下自己的檢查紀錄
記下實際做過的操作、差異與結果。還沒做的項目寫「待完成」。
勾選與筆記只保存在這個瀏覽器。
重設只清除勾選，網站檔案與檢查筆記都保留。