如何修改JS函数，通过querySelectorAll为所有.text类元素应用动画

当前动画仅作用于单个元素的本质原因：原有代码使用document.querySelector('.text')获取目标元素，该方法仅返回DOM中第一个匹配选择器的节点，后续同类型元素完全不在脚本的操作范围内。

1. 替换元素获取逻辑 #

将单元素获取方法替换为全量匹配方法：

• 弃用querySelector/getElementById这类只能取单个节点的API
• 改用document.querySelectorAll('.text')，该方法会返回页面内所有带.text类的元素组成的静态集合
• 遍历集合中的每个节点，独立应用动画逻辑，不要直接对整个集合做属性赋值

2. 重构动画函数避免状态串扰 #

原有逻辑使用全局变量存储打字进度、绑定单个节点的定时器，多元素同时运行时会出现进度错乱、定时器冲突的问题，需要做两点调整：

• 将每个元素的打字进度存在节点自身的自定义属性上，不使用全局变量存储单份进度
• 为每个元素单独分配独立的定时器，避免一个元素的动画触发影响其他元素

// 单元素独立动画推进逻辑
function runTypingAnim(el) {
  // 初始化当前元素的打字进度，存在节点自身避免串扰
  if (!el.dataset.typingIndex) el.dataset.typingIndex = 0;
  const fullContent = el.dataset.fullText;
  el.textContent = fullContent.slice(0, Number(el.dataset.typingIndex)) + '|';
  el.dataset.typingIndex = Number(el.dataset.typingIndex) + 1;
  // 动画结束后移除文本光标
  if (Number(el.dataset.typingIndex) > fullContent.length) {
    el.textContent = fullContent;
    el.classList.remove('typing-cursor');
    return;
  }
  setTimeout(() => runTypingAnim(el), 100);
}

// 复选框触发的总入口函数
function myTYPINGFunction() {
  // 获取所有带.text类的元素
  const targetEls = document.querySelectorAll('.text');
  targetEls.forEach(el => {
    // 提前把完整文本存在自定义属性上，避免打字过程中修改原文本导致状态丢失
    el.dataset.fullText = el.textContent;
    el.textContent = ''; // 初始清空内容启动打字效果
    runTypingAnim(el);
  })
}

自定义类名兼容方案 #

如果后续需要把类名拆为text_1、text_2这类独立命名，不需要逐个类名写逻辑，只要把元素选择器替换为：
document.querySelectorAll('[class^="text_"]')
即可一次性匹配所有类名以text_开头的元素，复用同一套动画逻辑，不需要为每个类名单独封装动画方法。

• 之前参考遍历方法没生效的核心原因：遍历过程中仍然复用同一个全局计数变量存储打字进度，多个元素共享同一套状态，会出现动画只触发一次、部分节点无效果的问题，只要把每个元素的进度存在节点自身的自定义属性上，即可解决
• 不要使用getElementsByClassName返回的动态集合直接遍历，老版本浏览器中该集合会随DOM节点变化实时更新，容易出现遍历索引错乱、重复触发动画的问题，优先使用querySelectorAll返回的静态集合
• CSS部分不需要额外修改，原有的光标样式、动画过渡规则只要绑定在.text类选择器上，会自动匹配所有带该类的元素，无需逐个类名重复写样式

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