如何批量实现多文本容器的动画触发逻辑？现有代码仅支持单个实例

调整HTML结构 #

所有文本容器统一使用text-container类即可，无需单独设置ID：

<div class="text-container"> 
  <span> Campfire Cooking in Another World with my Absurd Skill</span> 
  <div class="fader fader-left"></div>
  <div class="fader fader-right"></div>
</div>
<div class="text-container"> 
  <span> Another Long Text That Needs Animation</span> 
  <div class="fader fader-left"></div>
  <div class="fader fader-right"></div>
</div>

批量处理的JavaScript代码 #

通过querySelectorAll获取所有目标容器，遍历每个容器完成逻辑判断：

// 获取所有带text-container类的元素
const containers = document.querySelectorAll('.text-container');

// 遍历每个容器处理内部文本
containers.forEach(container => {
  // 取当前容器内的span元素
  const text = container.querySelector('span');
  
  // 判断容器宽度是否小于文本宽度，满足则添加动画类
  if (container.clientWidth < text.clientWidth) {
    text.classList.add('animate');
  }
});

额外优化（可选） #

如果需要适配窗口大小变化，可添加监听事件，确保窗口缩放时动画状态自动更新：

function checkTextOverflow() {
  const containers = document.querySelectorAll('.text-container');
  containers.forEach(container => {
    const text = container.querySelector('span');
    if (container.clientWidth < text.clientWidth) {
      text.classList.add('animate');
    } else {
      text.classList.remove('animate'); // 文本能完全显示时移除动画
    }
  });
}

// 页面加载时执行一次
checkTextOverflow();

// 监听窗口大小变化，实时更新状态
window.addEventListener('resize', checkTextOverflow);

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