本文讲解如何修复因重复使用 id 导致的“仅第一个按钮生效”问题，通过改用 class 选择器与事件委托，使每个按钮仅控制其所在容器内的对应文本元素。
本文讲解如何修复因重复使用 id 导致的“仅第一个按钮生效”问题，通过改用 class 选择器与事件委托，使每个按钮仅控制其所在容器内的对应文本元素。
在前端开发中，id 属性必须在页面中唯一。原代码中多次使用 id="dots"、id="more" 和 id="myBtn"，导致 document.getElementById() 始终只返回第一个匹配元素，因此所有按钮都只能操作第一个区块的内容——这正是“仅第一个生效”的根本原因。
正确的做法是：用 class 替代 id，并通过事件目标（event.currentTarget）向上查找其所属容器，再在该局部作用域内精准定位子元素。以下是完整、可复用的解决方案：
✅ 步骤一：更新 HTML 结构（移除重复 ID，改用语义化 class）
<div class="quote__box__text"> lorem ipsum <span class="dots">...</span> <span class="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <button class="myBtn">Przeczytaj więcej</button> </div> <div class="quote__box__text"> lorem ipsum <span class="dots">...</span> <span class="more">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <button class="myBtn">Przeczytaj więcej</button> </div>
⚠️ 注意：.more 元素默认应隐藏，推荐通过 CSS 控制而非内联样式，确保初始状态统一且可维护：
.more { display: none; }
✅ 步骤二：使用 querySelectorAll + 事件监听器批量绑定
document.addEventListener('DOMContentLoaded', () => {
const buttons = document.querySelectorAll('.myBtn');
buttons.forEach(button => {
button.addEventListener('click', function (e) {
// 获取当前按钮所在的 .quote__box__text 容器
const container = e.currentTarget.closest('.quote__box__text');
if (!container) return;
// 在该容器内查找对应元素（作用域隔离，互不干扰）
const dots = container.querySelector('.dots');
const more = container.querySelector('.more');
// 切换显示状态与按钮文案
if (dots.style.display === 'none') {
dots.style.display = 'inline';
more.style.display = 'none';
e.currentTarget.textContent = 'Przeczytaj więcej';
} else {
dots.style.display = 'none';
more.style.display = 'inline';
e.currentTarget.textContent = 'Zwiń';
}
});
});
});✅ 关键优势说明
- 作用域隔离：每个按钮只操作其父容器 .quote__box__text 内的 .dots 和 .more，彻底避免跨区块误操作；
- 可扩展性强：新增任意数量 .quote__box__text 区块，无需修改 JS 逻辑；
- 符合现代实践：避免内联 onclick，解耦 HTML 与 JS；利用 closest() 提升 DOM 遍历健壮性；
- 兼容性良好：querySelectorAll、closest()、addEventListener 均支持 IE9+，满足主流项目需求。
? 进阶建议（可选）
如需支持动画过渡或持久化状态（如 URL 锚点、localStorage 记忆展开项），可在切换逻辑中加入 CSS transition 或封装为可复用的 ToggleMore 类。但对基础功能而言，上述方案已简洁、高效、无副作用。
至此，所有“阅读更多”按钮均可独立响应，互不影响——这才是面向多实例组件的正确打开方式。
