更改单词的字母重新格式化整个 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

您可能想要这样的东西：

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

Answer 2

基本上您需要处理第一段的内部文本和第二段锚点的内部文本，因此您需要相应地更改您使用的选择器。 .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()));
      });
})});

Fiddle: https://jsfiddle.net/4e20tpku/

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

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

Changing the letters of a word reformat the whole html

javascript

letter