4.3.3 功能三：标记完成
本步目标：点击"完成"按钮，任务显示为已完成状态；再次点击可以取消
这是待办清单的灵魂功能——看着任务一个个被划掉，成就感满满。
🎯 我们要实现什么
用户的操作流程：
- 点击某个任务的"完成"按钮
- 该任务显示为"已完成"状态（文字加删除线，颜色变淡）
- 再次点击，任务恢复为"未完成"状态
- 这是一个开关式的切换
📝 完整 Prompt
继续在现有代码基础上添加功能：
【当前状态】
添加任务和删除任务功能都已正常工作。
现在请添加"标记完成"功能。
【需要实现】
当用户点击某个任务的"完成"按钮时：
1. 首次点击 - 标记为已完成：
- 任务文字添加删除线
- 文字颜色变成灰色
- 按钮文字从"完成"变成"取消"
2. 再次点击 - 取消完成状态：
- 删除线消失
- 文字颜色恢复正常
- 按钮文字从"取消"变回"完成"
【技术要求】
- 这是一个切换（toggle）效果，可以反复切换
- 在现有代码基础上添加，保持风格一致
- 关键逻辑添加中文注释✅ 预期结果
测试步骤：
- 添加一个任务"写周报"
- 点击它的"完成"按钮
- 检查视觉变化：
| 检查项 | 点击前 | 点击后 |
|---|---|---|
| 任务文字 | 正常显示 | 有删除线，颜色变灰 |
| 按钮文字 | "完成" | "取消" |
- 再次点击同一个按钮
- 检查是否恢复原状
🔍 检查点
- [ ] 点击完成按钮，任务文字有删除线
- [ ] 点击完成按钮，文字颜色变灰
- [ ] 点击完成按钮，按钮文字变成"取消"
- [ ] 再次点击，所有效果恢复原状
- [ ] 标记完成不影响其他任务
- [ ] 已完成的任务仍然可以删除
⚠️ 常见问题排查
问题 1：点击后没有任何视觉变化
可能原因：CSS 样式没有正确应用，或者类名添加错误。
修复 Prompt：
点击完成按钮后，代码可能执行了（按钮文字变了），
但是任务文字没有添加删除线，颜色也没变。
请检查 CSS 样式是否正确定义，以及是否正确添加到了任务元素上。问题 2：无法取消完成状态
修复 Prompt：
标记完成功能只能用一次：
第一次点击可以标记为完成，但再次点击无法取消。
请修复，让这个按钮能够切换状态（toggle）。问题 3：按钮文字没有变化
修复 Prompt：
点击完成后，任务样式变了，但按钮文字一直是"完成"，没有变成"取消"。
请在切换状态的同时，也切换按钮的文字。问题 4：点一个任务，其他任务也变了
修复 Prompt：
点击任务A的完成按钮，结果任务B和任务C也被标记为完成了。
请修复，确保只修改被点击的那个任务的状态。💡 技术小贴士：状态切换的"开关灯"思维
"标记完成"功能本质上是一个状态切换，就像开关灯：
| 灯的状态 | 对应任务状态 | 按下开关后 |
|---|---|---|
| 灯灭（关） | 未完成 | 变成开（完成） |
| 灯亮（开） | 已完成 | 变成关（未完成） |
在代码里，这通常通过给元素添加或移除一个"已完成"的标记（叫做 class）来实现：
点击前：<div class="task">买牛奶</div>
点击后：<div class="task completed">买牛奶</div>
↑ 添加了这个标记
再次点击：<div class="task">买牛奶</div>
↑ 标记被移除CSS 里预先定义好了 .completed 的样式（删除线、灰色），所以添加这个标记后，样式就自动生效了。
这种"通过添加/移除标记来改变样式"的方式，是前端开发中非常常见的模式。
🎉 三大核心功能完成
如果你已经：
- ✅ 添加任务 - 能用
- ✅ 删除任务 - 能用
- ✅ 标记完成 - 能用
恭喜！你的待办清单已经具备了最核心的功能。
现在的状态：这是一个"能用"的待办清单了。你可以：
- 添加今天要做的事情
- 做完一件划掉一件
- 不需要的任务可以删除
但你可能对某些细节不太满意，比如：
- 样式想再调整一下
- 想让已完成的任务自动移到底部
- 想添加一个"清空已完成"的按钮
下一节，我们来学习如何有效地与 AI 沟通这些调整需求。