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

Answer 1

基本上，您需要使用第一段的内部文本并在第二段的锚点的内部文本中工作，因此您需要相应地更改您使用的选择器。.text()粘合所有匹配标签的内部文本，这是粘合文本的原因。这意味着.text()需要在已更改选择器的循环上$(this)的回调中调用它。function我只需要对你的 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()));

  });

})