最简单方案是用 dataset 存状态并直接改 textcontent，但必须用 data-following="true/false" 而非布尔值，配合 disabled 和 css 视觉反馈；真实场景需防重复点击、服务端同步状态、失败回滚，并补充移动端 touchstart 反馈。
点击按钮切换“关注”和“已关注”文本
直接改 textContent 最简单，但要注意状态必须可逆、可读取。不能只靠文字判断，否则用户手动改 DOM 或初始状态错就会翻车。
推荐用布尔属性或 data 属性存状态，比如 data-following="true"，再配合 CSS 控制样式（如颜色、禁用态）。
- 别用
innerText判断当前状态——它受 CSS 隐藏影响，且国际化时不可靠 - 初始状态建议服务端渲染或 JS 显式初始化，避免首次点击逻辑错乱
- 按钮加
type="button"，防止意外触发表单提交
用 dataset 管理关注状态并同步 UI
dataset 是最轻量、语义清晰的方案，比 class 切换更易维护。状态变更后，顺手更新按钮的 disabled 和视觉反馈（比如加个 following class）。
const btn = document.querySelector('.follow-btn');
btn.addEventListener('click', function() {
const isFollowing = this.dataset.following === 'true';
this.dataset.following = !isFollowing;
this.textContent = isFollowing ? '关注' : '已关注';
this.disabled = !isFollowing;
});
注意：赋值时 this.dataset.following = 'true' 或 'false'，不要写布尔值，否则会被转成字符串 "true" —— 这是 dataset 的行为，不是 bug。
防重复点击与网络请求联动
真实场景里，点击得发请求。没处理好会连续点多次，导致状态错乱或接口被刷爆。
- 点击后立刻设
this.disabled = true，请求完成再恢复（无论成功失败） - 服务端返回新状态比前端 toggle 更可靠，尤其多人协作或跨设备时
- 若请求失败，记得回滚
dataset.following和文案，否则 UI 和实际状态不一致
示例片段：
async function toggleFollow(userId) {
const btn = document.querySelector('.follow-btn');
const wasFollowing = btn.dataset.following === 'true';
btn.disabled = true;
try {
const res = await fetch('/api/follow', {
method: 'POST',
body: JSON.stringify({ user_id: userId, follow: !wasFollowing })
});
const { following } = await res.json();
btn.dataset.following = following;
btn.textContent = following ? '已关注' : '关注';
} catch (e) {
btn.dataset.following = wasFollowing; // 恢复原状态
btn.textContent = wasFollowing ? '已关注' : '关注';
} finally {
btn.disabled = false;
}
}
移动端点击反馈缺失问题
纯 JS 切换文案后，iOS Safari 或某些 Android 浏览器可能无点击反馈（比如无灰底、无震动），用户会觉得没点上。
- 加
touchstart临时加 class（如active），CSS 里定义.follow-btn.active { opacity: 0.7; } - 避免用
:active伪类——在部分 iOS 上失效，尤其按钮没cursor: pointer时 - 如果用了
preventDefault或阻止默认行为，务必确认 touch/click 事件链没断
状态管理本身不难，难的是边界情况：网络失败、并发点击、服务端状态漂移、初始值缺失——这些地方一漏，用户就看到“点了一次，文案没变”或者“点了两次才变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
