本文介绍在多个按钮共享同一事件处理函数时，如何动态为其设置各自专属的文本内容，包括利用 id、title 属性或 data-* 自定义属性等三种推荐方式，并附带可维护性优化建议。
本文介绍在多个按钮共享同一事件处理函数时，如何动态为其设置各自专属的文本内容，包括利用 id、title 属性或 data-* 自定义属性等三种推荐方式，并附带可维护性优化建议。
在构建交互式图像热点（如体育场平面图上的可点击标记）时，常需为多个按钮复用同一套展开/收起逻辑，但每个按钮点击后应显示语义化、差异化的文本（例如“- Стадион”“- Касса”“- Выход №3”），而非统一字符串。核心挑战在于：如何让一个通用函数准确识别当前被点击的按钮，并读取其专属文案。
✅ 推荐方案：使用 data-text 属性（最清晰、最语义化）
为每个 <button> 添加 data-text 属性，显式声明其对应文本：
<button class="circle" id="cir-1" data-text="Стадион">+</button> <button class="circle" id="cir-2" data-text="Касса">+</button> <button class="circle" id="cir-3" data-text="Выход №3">+</button> <!-- 更多按钮... -->
JavaScript 中通过 dataset.text 安全读取（自动驼峰转换，data-my-text → dataset.myText）：
function changeTextAndSize(circle) {
circle.classList.toggle('active');
if (circle.classList.contains('active')) {
circle.style.transform = 'scale(1.1)';
// ✅ 动态插入专属文本，支持任意字符（含空格、符号、中文）
circle.textContent = `- ${circle.dataset.text}`;
} else {
circle.textContent = '+';
}
}
document.querySelectorAll('.circle').forEach(btn => {
btn.addEventListener('click', () => changeTextAndSize(btn));
});? 使用 textContent 替代 innerText（更标准、性能更好，且避免 IE 兼容性问题）；dataset 是原生 API，无需额外解析。
? 备选方案：基于 id 或 title（适用简单场景）
-
仅依赖 id（如 id="cir-1"）：
circle.textContent = `- ${circle.id.replace('cir-', '')}`; // → "1"适合纯数字编号，但缺乏语义，不推荐用于中文/多语言场景。
-
使用 title 属性：
<button class="circle" id="cir-1" title="Центральный вход">+</button>
circle.textContent = `- ${circle.title}`;优点是 title 原生支持悬停提示，但语义上更偏向“辅助说明”，非主文案载体。
⚠️ 注意事项与最佳实践
- 移除冗余类名：如 .cir-1、.cir-2 等仅用于定位的类，在 CSS 中完全可通过 #cir-1、#cir-2 精确控制，避免类名爆炸和维护困难。
-
CSS 优化建议：将所有 .cir-* 的 margin-left/margin-top 提取为 style 属性或 JS 动态注入，使 HTML 更语义化：
<button class="circle" id="cir-1" data-text="Стадион" style="left: 592px; top: 435px;">+</button> -
无障碍增强：为按钮添加 aria-label，确保屏幕阅读器能正确播报：
<button class="circle" data-text="Стадион" aria-label="Открыть информацию о стадионе">+</button>
通过 data-text 驱动文案，既保持 HTML 清晰可读，又赋予 JavaScript 强大的扩展能力——未来只需增删 HTML 属性，无需修改 JS 逻辑，真正实现关注点分离与可持续维护。
