Changing the letters of a word reformat the whole html

问题

I have this script that is changing all the letters of a content when you hover them.

Actually it changes the whole format of the page and glue all the content.

I have been told that the main issue is with this part:

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

and that doing it like that

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

could fix the issues of duplication and formatting

But I have no clue on how to use it since I'm pretty new to all of that. Thanks a lot for the help.

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>

回答1:

Basically you need to work with the inner text of the first paragraph and to work inside the inner text of the anchors of the second paragraph, hence you will need to change the selector you use accordingly. .text() glues the inner text of all matching tags, which is the cause of gluing your text. This means that .text() needs to be called on $(this) inside a function callback on the loop of the changed selector. I only needed to do slight changes on your JS code, but the slight changes are important:

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/

Here I'm assuming that you want to be able to change the letters of vimeo inside the second link of the second paragraph as well. If this assumption is incorrect, then a slight change on the selector I have been using will be needed.

回答2:

You probably want something like this:

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

来源：https://stackoverflow.com/questions/62637453/changing-the-letters-of-a-word-reformat-the-whole-html

标签

javascript

letter