鼠标悬停替换字母为A，离开时恢复原字母的脚本实现问题

我编写了一段脚本，想要实现鼠标悬停字母时将其替换为A，鼠标离开时恢复原本字符的效果，但目前代码无法正常工作。以下是我的实现代码：

原代码 #

HTML #

<div class="change">
 <p> The colours of the binding (chosen by me) will be white letters on a blue field – the Greek flag though really of Bavarian origin and imported with the dynasty. Yet in a special way they symbolise the myth well – the white islands scattered over the sea.</p>
</div>

CSS #

div{
font-family: monospace;
}

JavaScript #

const toLetterize = document.querySelectorAll(
  ".change p"
);
console.log(toLetterize);


toLetterize.forEach(function (letterized) {
  const letters = letterized.innerHTML;
  var nHTML = "";
  for (var letter of letters) {
    nHTML += "<u>" + letter + "</u>";
  }

  letterized.innerHTML = nHTML;

  document.querySelectorAll("u").forEach(function (hoveredLetter) {
    hoveredLetter.addEventListener("mouseenter", function (e) {
      console.log("hovered")
      hoveredLetter.innerHTML = nextLetter(hoveredLetter.innerText);
    });
    hoveredLetter.addEventListener("mouseleave", function (e) {
      console.log("leaving" + nextLetter(hoveredLetter.innerText))
      hoveredLetter.innerHTML = nextLetter(hoveredLetter.innerText);
    });
  });
});


function nextLetter(ch) {
  console.log(ch);
  if (!ch.match(/[a-z]/i)) {
    return "A";
  } else if (ch === "A") {
    return ch;
  }
  return String.fromCharCode(ch);
}

问题分析与修正 #

原代码存在几个关键问题：

1. 丢失原字符：没有保存每个字母的原始值，鼠标离开时无法恢复
2. 事件重复绑定：每次遍历toLetterize时都选中所有<u>元素，导致同一元素被多次绑定事件
3. nextLetter函数逻辑错误：String.fromCharCode(ch)无法正确处理字符，且函数逻辑与需求不符

修正后的代码 #

const toLetterize = document.querySelectorAll(".change p");

toLetterize.forEach(letterized => {
  const letters = letterized.textContent; // 用textContent避免HTML标签干扰
  let nHTML = "";
  
  for (const letter of letters) {
    // 给每个<u>元素添加data-original属性保存原字符
    nHTML += `<u data-original="${letter}">${letter}</u>`;
  }
  
  letterized.innerHTML = nHTML;
  
  // 只给当前处理的p元素下的<u>绑定事件，避免重复绑定
  letterized.querySelectorAll("u").forEach(hoveredLetter => {
    hoveredLetter.addEventListener("mouseenter", () => {
      hoveredLetter.textContent = "A";
    });
    
    hoveredLetter.addEventListener("mouseleave", () => {
      // 从data-original中取出原字符恢复
      hoveredLetter.textContent = hoveredLetter.dataset.original;
    });
  });
});

核心改动说明 #

• 使用textContent获取原始文本，避免HTML标签影响字符拆分
• 给每个<u>元素添加data-original属性，持久化保存原始字符
• 仅为当前<p>元素下的<u>绑定事件，避免重复绑定
• 简化事件逻辑：mouseenter直接替换为A，mouseleave直接从dataset中恢复原字符

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