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

Question

我正在寻找一种在您将鼠标悬停时更改文本中字母的方法。 在那之后，他们最终不会恢复正常并保持改变。 所以我找到了一个代码来改变文本中每个字母的颜色，但我正在寻找相同的东西来选择字母表中的下一个字母。

非常感谢您的帮助。

$(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 {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Hello World!</p>

我还发现此代码可让您更改带有 id 的文本。 我只是不知道如何将它单独应用于我的所有角色。

const $foo = $('#foo');

$foo.hover(function(){
  $foo.text('Blah');
}, function(){
  $foo.text('Foo');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <li><a href="#0" id="foo">Foo</a></li>
</nav>

另外，我有这个脚本可以找到下一个字母。

function LetterChanges(str) {
    var result = "";
    for (var i = 0; i < str.length; i++) {
        if (122 == str.charCodeAt(i)) {
            result += "a";
        } else if (90 == str.charCodeAt(i)) {
            result += "A";
        } else if ((65 <= str.charCodeAt(i) && str.charCodeAt(i) <= 89) || (97 <= str.charCodeAt(i) && str.charCodeAt(i) <= 121)) {
            result += String.fromCharCode(str.charCodeAt(i) + 1);
        } else {
            result += str.charAt(i);
        }
    }
    return result;
}

console.log(LetterChanges("AaZz+cod!foo"));
$('#result').html(LetterChanges("paul & rémi"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="result"></h1>

Answer 1

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

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()));
  });
})

解释：

• 下一封信
  • 检查是否是字母，如果不是字母则什么都不做
  • 如果是 Z 或 z，则从字母表开始，保持大小写
  • 否则查找下一个字母
• for 循环创建包含单个字母的跨度，具有 x 类
• 这就是 CSS hover 规则起作用的原因
• 我们可以创建 Javascript/jQuery 事件
• 我创建了一个 Javascript 事件，它在悬停时将字母更改为下一个字母

小提琴：https://jsfiddle.net/1ar8uL4s/