---
title: "4.3.3 功能三：标记完成"
order: 4
---


![04-practice-0-to-1_4.3-core-features_4.3.3-complete-task.png](/images/Basic/04-practice-0-to-1_4.3-core-features_4.3.3-complete-task.png)
# 4.3.3 功能三：标记完成

> **本步目标**：点击"完成"按钮，任务显示为已完成状态；再次点击可以取消

这是待办清单的灵魂功能——看着任务一个个被划掉，成就感满满。

## 🎯 我们要实现什么

用户的操作流程：

1. 点击某个任务的"完成"按钮
2. 该任务显示为"已完成"状态（文字加删除线，颜色变淡）
3. 再次点击，任务恢复为"未完成"状态
4. 这是一个开关式的切换

## 📝 完整 Prompt

继续在现有代码基础上添加功能：

```
【当前状态】
添加任务和删除任务功能都已正常工作。
现在请添加"标记完成"功能。

【需要实现】
当用户点击某个任务的"完成"按钮时：

1. 首次点击 - 标记为已完成：
   - 任务文字添加删除线
   - 文字颜色变成灰色
   - 按钮文字从"完成"变成"取消"

2. 再次点击 - 取消完成状态：
   - 删除线消失
   - 文字颜色恢复正常
   - 按钮文字从"取消"变回"完成"

【技术要求】
- 这是一个切换（toggle）效果，可以反复切换
- 在现有代码基础上添加，保持风格一致
- 关键逻辑添加中文注释
```

## ✅ 预期结果

**测试步骤**：
1. 添加一个任务"写周报"
2. 点击它的"完成"按钮
3. 检查视觉变化：

| 检查项 | 点击前 | 点击后 |
|-------|-------|-------|
| 任务文字 | 正常显示 | 有删除线，颜色变灰 |
| 按钮文字 | "完成" | "取消" |

4. 再次点击同一个按钮
5. 检查是否恢复原状

## 🔍 检查点

- [ ] 点击完成按钮，任务文字有删除线
- [ ] 点击完成按钮，文字颜色变灰
- [ ] 点击完成按钮，按钮文字变成"取消"
- [ ] 再次点击，所有效果恢复原状
- [ ] 标记完成不影响其他任务
- [ ] 已完成的任务仍然可以删除

## ⚠️ 常见问题排查

### 问题 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 沟通这些调整需求。

→ [4.3.4 迭代优化的艺术](./4.3.4-iterate.md)