Javascript 如何更改悬停文本中的字母

我正在寻找一种方法，当你将字母悬停在文本中时，可以改变它们。 在那之后，他们最终将无法恢复正常并保持改变。 所以我找到了一个代码来改变文本中每个字母的颜色，但是我在寻找同样的东西来选择字母表中的下一个字母

非常感谢你的帮助

$（文档）.ready（函数（）{
变量字母=$（'p'）.text（）；
var-nHTML=''；
for（字母中的字母）{
nHTML+=“”+字母+“”；
}
$（'p'）.html（nHTML）；
})

.x:悬停{
颜色：红色；
}

你好，世界
 

如果我了解您需要什么，那么这就是解决方案：

function nextLetter(ch) {
    if (!ch.match(/[a-z]/i)) return ch;
    else if (ch === 'Z') return 'A';
    else if (ch === 'z') return 'a';
    return String.fromCharCode(ch.charCodeAt(0) + 1);
}
$(document).ready(function(){
  var letters = $('p').text();
  var nHTML = '';
  for(var letter of letters) {
    nHTML+="<span class='x'>"+letter+"</span>";
  }
  $('p').html(nHTML);
  $(".x").hover(function(e) {
    if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
  });
})

功能下一个触发器（ch）{
如果（！ch.match（/[a-z]/i））返回ch；
else if（ch=='Z'）返回'A'；
else if（ch=='z'）返回'a'；
返回字符串.fromCharCode（ch.charCodeAt（0）+1）；
}
$（文档）.ready（函数（）{
变量字母=$（'p'）.text（）；
var-nHTML=''；
for（字母中的字母）{
nHTML+=“”+字母+“”；
}
$（'p'）.html（nHTML）；
$（“.x”）.hover（函数（e）{
if（e.type==“mouseenter”）$（this.text）（nextLetter（$（this.text（）））；
});
})

说明：

• 下一个
  • 检查它是否是一封信，如果它不是一封信，则什么也不做
  • 如果是Z或Z，则将从字母表开始，保留大小写
  • 否则将查找下一个字母
• for循环创建包含单个字母的跨距，类为x
• 这就是CSS

  hover

  规则起作用的原因
• 我们可以创建Javascript/jQuery事件
• 我已经创建了一个Javascript事件，它会将字母更改为悬停时的下一个字母

---

小提琴：这正是我所需要的。谢谢。我现在更明白了。我还有一个问题：如果我想让标点符号和重音字母也按一定的顺序改变怎么办？再次非常感谢。@paulb不客气。您可以根据您的具体需要增强Nextleter。你可能会在nextLetter有更多的案例，并稍微改变那里的条件。如果你做这件事有困难，那么你可以问一个单独的问题。我鼓励你尝试解决这个问题以获得一些练习，但是如果你遇到另一个拦截器，你可能想问另一个问题并在评论部分留下它的链接。嘿，再次感谢，我似乎让它工作了，但不知何故它复制了的内容，并且似乎重新格式化了所有内容。。。我承认我被困住了。这是钢笔，您可以看到它是如何复制和删除样式和链接的。再次非常感谢。@paulb此处的注释部分不适合修复此问题。我鼓励你问另一个问题，并在评论部分告诉我。我一定会在今天或明天调查此事。但是，为了给您提供一些可能帮助您找到解决方案的想法，我第一眼看到的主要问题是

var letters=$（'p'）.text（）这将获取所有段落中的所有文本。这就是将你的价值观粘在一起的原因（复制）。然后是
$（'p'）.html（nHTML）
将粘贴的文本放入所有段落。@paulb您需要像
$（“p”）一样进行操作。每个（function（）{/*$（this）是此处的当前段落*/}），基本上将标记视为单个标记，将它们的内容彼此分离，要实现这一点，需要围绕已实现的逻辑进行循环。希望这能帮助你解决这个问题，但如果仍然有拦截器，那么我恳请你问另一个问题。