更改单词的字母重新格式化整个 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) {&nbsp; &nbsp; if (!ch.match(/[a-z]/i)) return ch;&nbsp; &nbsp; else if (ch === 'Z') return 'A';&nbsp; &nbsp; else if (ch === 'z') return 'a';&nbsp; &nbsp; return String.fromCharCode(ch.charCodeAt(0) + 1);}$(document).ready(function(){&nbsp; $('.one p, .two p a').each(function() {&nbsp; &nbsp; &nbsp; var letters = $(this).text();&nbsp; &nbsp; &nbsp; var nHTML = '';&nbsp; &nbsp; &nbsp; for(var letter of letters) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nHTML+="<span class='x'>"+letter+"</span>";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $(this).html(nHTML);&nbsp; &nbsp; &nbsp; $(".x").hover(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));&nbsp; &nbsp; &nbsp; });})});小提琴：https ://jsfiddle.net/4e20tpku/在这里，我假设您也希望能够在第二段的第二个链接中更改 vimeo 的字母。如果这个假设不正确，则需要对我一直使用的选择器进行轻微更改。

Answer 2

你可能想要这样的东西：$(document).ready(function() {&nbsp; var paragraphs = $('p');&nbsp; &nbsp; &nbsp;// select all paragraphs&nbsp; paragraphs.each(function() { // loop over them&nbsp; &nbsp; var letters = $(this).text(); // $(this) accesses the current loop item&nbsp; &nbsp; var nHTML = '';&nbsp; &nbsp; for (var letter of letters) {&nbsp; &nbsp; &nbsp; nHTML += "<span class='x'>" + letter + "</span>";&nbsp; &nbsp; }&nbsp; &nbsp; $(this).html(nHTML);&nbsp; });&nbsp; $(".x").hover(function(e) {&nbsp; &nbsp; if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));&nbsp; });})