如何为所有.type-me类元素应用JavaScript打字机效果

我是JavaScript新手，已经实现了一个可用的简易打字机效果脚本，但目前通过querySelector只能让第一个带.type-me类的元素生效，希望修改脚本使其对所有.type-me类元素生效。我曾尝试结合document.getElementsbyClassName和document.querySelectorAll，但知道需要用到循环，目前不太擅长编写循环，恳请协助。

原脚本代码：

var i = 0;
var txt = document.querySelector('.type-me').textContent;
document.querySelector('.type-me').textContent = '';
document.querySelector('.type-me').removeAttribute('style');
var speed = 500;
type();
function type() {
  if (i < txt.length) {
    document.querySelector('.type-me').textContent += txt.charAt(i);
    i++;
    setTimeout(type, speed);
  }
}

要实现所有.type-me元素的打字效果，核心是为每个元素单独维护打字状态（比如当前输入的位置、原始文本等），避免多个元素共用变量导致冲突。具体实现如下：

// 获取所有带.type-me类的元素
const typeElements = document.querySelectorAll('.type-me');
const speed = 500;

// 遍历每个元素，逐个初始化打字效果
typeElements.forEach(element => {
  // 保存当前元素的原始文本
  const originalText = element.textContent;
  // 清空元素内容并移除样式
  element.textContent = '';
  element.removeAttribute('style');
  
  // 定义当前元素的打字位置索引
  let currentIndex = 0;
  
  // 为当前元素定义专属的打字函数
  function type() {
    if (currentIndex < originalText.length) {
      element.textContent += originalText.charAt(currentIndex);
      currentIndex++;
      setTimeout(type, speed);
    }
  }
  
  // 启动当前元素的打字效果
  type();
});

关键说明： #

• querySelectorAll('.type-me')：选中页面中所有带.type-me类的元素，返回一个可遍历的元素集合
• forEach循环：遍历集合中的每个元素，每次循环都会创建独立作用域，里面的变量（originalText、currentIndex）和type函数只属于当前元素，不会和其他元素的状态冲突
• 每个元素的打字逻辑独立运行，确保多个元素的打字效果能同时正常工作

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