更改单词的字母重新格式化整个 html

Question

我有这个script，当你悬停它们时，它会改变内容的所有字母。

实际上它改变了页面的整个格式并粘合了所有内容。

我被告知主要问题在于这部分：

var letters = $('p').text();

就那样做

$("p").each(function() {/*$(this) is the current paragraph here*/});

可以解决重复和格式化问题

但我不知道如何使用它，因为我对这一切都很陌生。 非常感谢您的帮助。

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);

}
.one{
   grid-column: 1 /5;
  grid-row: 1;
    background-color:pink;
}
.two{
   grid-column: 5 / 8;
  grid-row: 1;
  background-color:yellow;
}
.three{
   grid-column: 8 / 13;
  grid-row: 1;
  background-color:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="one"><p>I'm the text</p></div>
  <div class="two"><p><a>I'm the link in the page</a>
    <a href="http://vimeo.com/" target="_blank" style="color: rgb(82, 19, 197);">vimeo</a><sup>➶</sup>
  </p></div>


</div>

Answer 1

基本上，您需要处理第一段的内部文本和第二段锚点的内部文本，因此您需要相应地更改您使用的选择器。 .text() 粘合所有匹配标签的内部文本，这是粘合文本的原因。这意味着 .text() 需要在已更改选择器循环的 function 回调内的 $(this) 上调用。我只需要对你的 JS 代码做一些细微的改动，但细微的改动很重要：

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(){
  $('.one p, .two p a').each(function() {
      var letters = $(this).text();
      var nHTML = '';
      for(var letter of letters) {
          nHTML+="<span class='x'>"+letter+"</span>";
      }
      $(this).html(nHTML);
      $(".x").hover(function(e) {
          if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
      });
})});

小提琴：https://jsfiddle.net/4e20tpku/

在这里，我假设您也希望能够更改第二段第二个链接中的 vimeo 字母。如果这个假设不正确，则需要对我一直使用的选择器进行轻微更改。

Answer 2

你可能想要这样的东西：

$(document).ready(function() {
  var paragraphs = $('p');     // select all paragraphs
  paragraphs.each(function() { // loop over them
    var letters = $(this).text(); // $(this) accesses the current loop item
    var nHTML = '';
    for (var letter of letters) {
      nHTML += "<span class='x'>" + letter + "</span>";
    }
    $(this).html(nHTML);
  });
  $(".x").hover(function(e) {
    if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
  });
})