Question

我正在尝试在jquery中制作文本动画，其中每个歌词中的字母各自在红色，橙色，粉色和蓝色之间交替。

我设法让颜色旋转，但它也创建了我原始未经编辑的文本的跨度。我宁愿能够将文本放在html中，而不是在javascript中包含我正在处理的其他一些内容，有没有办法做到这一点？

这是我的javascript代码。

$('.lyrics').each(function() {
  var letters = $(this).text().split('');
  var colors = ["#e72f14", "#f59f00;", "#ea4591", "#2a94c7"]; // red, yellow, pink, blue
  for (var i = 0; i < letters.length; i++) {
    //this creates a new span with the letters provided above which I don't want
    document.write("<span style='color:" + colors[(i % colors.length)] + ";'>" + letters[i] + " </span>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="lyrics">There is a castle in the clouds<p>

Answer 1

使用跨度创建一个字符串，然后用新字符串替换原始文本。请注意，为了保留歌词中的空格，我首先用空格分割歌词以给出单词，然后将每个单词分成字母。然后我在字符串中添加一个空格以返回句子。

$('.lyrics').each(function(){
  var words = $(this).text().split(' ');
  var str ='';
  var colors = ["#e72f14","#f59f00;","#ea4591","#2a94c7"]; // red, yellow, pink, blue

  words.forEach(function(word){
     var letters = word.split('');    

     letters.forEach(function(letter,i){
     str += "<span style='color:" + colors[(i % colors.length)] + ";'>" + letter + "</span>";
     })
   str += '&nbsp;';
  })
  $('.lyrics').html(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="lyrics">There is a castle in the clouds<p>

Answer 2

你几乎是好的:-)问题是document.write()的自然行为是将给定的文本插入到文档中。这里我们要替换段落的HTML内容。一个可能的解决方案是替换letters数组中的每个字母，使用join将它们合并回来，并使用.html()更新段落：

$('.lyrics').each(function() {
  var letters = $(this).text().split('');
  var colors = ["#e72f14", "#f59f00;", "#ea4591", "#2a94c7"];
  for (var i = 0; i < letters.length; i++) {
    letters[i] = "<span style='color:" + colors[(i % colors.length)] + ";'>" + letters[i] + "</span>";
  }
  $(this).html(letters.join(""));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="lyrics">There is a castle in the clouds<p>

以下是join的工作原理：

["g", "r", "a", "c", "i", "e"].join("") // "gracie"

顺便说一句，我已将" </span>"替换为"</span>"。

用jquery交替颜色？

2 个答案: