更改单词的字母会重新格式化整个html [英] Changing the letters of a word reformat the whole html

问题描述

我有这个script，当您将内容悬停时，它会更改内容中的所有字母.

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

那样做

$("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>

推荐答案

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

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

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

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

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.

这篇关于更改单词的字母会重新格式化整个html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！