核心思路是用CSS伪元素控制按钮状态切换，JS仅切换类名实现对勾显示与文字隐藏，兼顾无障碍、深色模式及防重复提交。
点击按钮后显示对勾图标而不是文字
核心思路是用 CSS 控制按钮内容切换，避免 JS 操作 DOM 文本或频繁增删元素。直接用伪元素 ::before 或 ::after 渲染对勾，配合类名控制显隐。
常见错误是用 innerHTML = '✓' 硬替换，导致后续状态难恢复、无障碍支持差、样式重绘不一致。
- HTML 中保持语义化按钮：
<button type="button" class="cart-btn">加入购物车</button> - CSS 里用
.cart-btn::after绘制对勾（例如 Unicode\2713或 SVG 背景），默认display: none - JS 只负责切换类名：
btn.classList.toggle('added') - 对应 CSS 规则：
.cart-btn.added::after { display: inline-block; }，同时可加.cart-btn.added span { display: none; }隐藏原文字（如果文字包在<span>里）
用纯 CSS 实现状态切换动画（无 JS）
如果只是视觉反馈（比如“点击即变对勾，再点恢复”），且不需要同步后端或更新数量，可以用 :checked + 隐藏 checkbox 的方式实现零 JS 切换。
关键在于把按钮变成带状态的控件，而非单纯触发事件的元素。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 结构上包裹一个隐藏
<input type="checkbox">，用label关联它：<input id="cart-1" type="checkbox"><label for="cart-1" class="cart-btn">加入购物车</label> - CSS 中用
input:checked + label::after显示对勾，input:checked + label span隐藏文字 - 好处：无需监听 click，天然支持键盘空格/回车切换，状态持久（刷新后仍保留）；坏处：无法主动重置（除非 JS 操作
input.checked = false）
button 点击后禁用并防止重复提交
用户快速连点会导致多次添加，即使 UI 显示了对勾，后端可能收到多条请求。必须在 JS 层做防抖+禁用，且要兼顾可访问性。
- 点击后立即设
btn.disabled = true，同时加类名（如.disabled）控制样式灰显 - 成功响应后才切换为
.added状态；失败则恢复disabled = false并提示错误 - 别只靠 CSS
pointer-events: none—— 它绕过焦点和键盘操作，屏幕阅读器仍可触发，也不阻止 Enter 键提交 - 示例逻辑：
btn.addEventListener('click', async () => { if (btn.disabled) return; btn.disabled = true; try { await addToCartAPI(); btn.classList.add('added'); } catch (err) { alert('添加失败'); } finally { btn.disabled = false; } });
对勾图标适配深色模式与高对比度模式
直接用 content: '✓' 在深色背景上可能看不清，Windows 高对比度模式下还会被强制替换为系统符号，导致对勾消失。
- 优先用 SVG 内联图标（比 Unicode 更可控），并设置
fill: currentColor，随文本色自动适配 - 避免固定
color: #28a745，改用 CSS 自定义属性：--success-color: var(--color-success, #28a745)，方便主题切换 - 在
@media (forced-colors: active)中重置对勾样式，例如强制显示为实心圆点或文字 “已添加” - 测试时打开系统级高对比度模式（Win：设置 > 辅助功能 > 高对比度；macOS：辅助功能 > 显示 > 增加对比度），观察对勾是否仍可识别
