多容器Read More按钮失效问题的修复方法咨询

问题 #

当在不同容器（如带read-more-container0类的容器）中添加Read More按钮时，按钮会失效；但在同一个容器（如read-more-container类的容器）内添加2-3个按钮时，所有按钮均可正常工作。需要让页面上所有Read More按钮都能正常触发文本展开/收起功能。

原因分析 #

原代码里document.querySelector('.read-more-container')只能拿到第一个匹配这个类名的容器，事件监听器只绑在了这个容器上。其他容器（比如read-more-container0）没绑定事件，所以里面的按钮点了没反应。

修复方案 #

方案一：给所有目标容器绑定事件 #

用querySelectorAll获取所有需要的容器，逐个绑定点击事件：

// 获取所有需要绑定事件的容器
const parentContainers = document.querySelectorAll('.read-more-container, .read-more-container0');

parentContainers.forEach(container => {
  container.addEventListener('click', event => {
    const current = event.target;
    // 判断是否是Read More按钮
    if (!current.classList.contains('read-more-btn')) return;
    
    const currentText = current.parentNode.querySelector('.read-more-text');
    currentText.classList.toggle('read-more-text--show');
    // 切换按钮文本
    current.textContent = current.textContent.includes('Read More') ? "Read Less..." : "Read More...";
  });
});

方案二：全局事件委托（推荐） #

把事件直接绑定到document上，不管后续新增多少容器，按钮都能生效，不需要重复绑定：

document.addEventListener('click', event => {
  const current = event.target;
  // 只处理Read More按钮的点击
  if (!current.classList.contains('read-more-btn')) return;
  
  const currentText = current.parentNode.querySelector('.read-more-text');
  currentText.classList.toggle('read-more-text--show');
  current.textContent = current.textContent.includes('Read More') ? "Read Less..." : "Read More...";
});

额外优化建议 #

• 尽量给所有展开容器统一类名，比如都用read-more-container，别搞read-more-container0这种差异化命名，代码更简洁，维护也方便。
• 判断按钮时用current.classList.contains('read-more-btn')比className.includes更靠谱，避免类名有相似字符串时误判。

内容的提问来源于stack exchange，提问作者Yassmine Mohhamed