Question

我有一个页面，我在其中使用append函数每5秒添加一行新文本（“ .newText”）。

这是我目前拥有的：

    var fontColors

    var randomColor

    $(function(){

    fontColors = ['red','orange','yellow','green','blue','indigo','violet','pink']

    randomColor = fontColors[Math.floor(Math.random() * fontColors.length)]

    $('.newText').css({
            'color':randomColor

          })

    $('.newText').append('<p>original line of text</p>')

    setInterval(function(){ 
          $('.newText').append('<p>this text is added every 5 seconds</p>')
         randomColor = fontColors[Math.floor(Math.random() * fontColors.length)]
          $('.newText').css({
          'color':randomColor
          })
        }, 5000)
  })
  })

现在，它每隔5秒钟（显然）就会更改屏幕上所有文本的颜色。我希望每个新行都有不同的颜色，但是我不希望更改以前附加的文本行的颜色。

Answer 1

这应该可以解决问题。而不是将颜色添加到您的.newText中，而是添加了新添加的行。

var fontColors;
var randomColor;

$(function(){
    fontColors = ['red','orange','yellow','green','blue','indigo','violet','pink']

    randomColor = fontColors[Math.floor(Math.random() * fontColors.length)]

    $('.newText').css({'color':randomColor});

    $('.newText').append('<p>original line of text</p>');

    setInterval(function(){ 
          var newLine = $('<p>this text is added every 5 seconds</p>');
          $('.newText').append(newLine)
         randomColor = fontColors[Math.floor(Math.random() * fontColors.length)]
          $(newLine).css({
          'color':randomColor
          })
        }, 5000)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="newText"></span>

Answer 2

您可以在添加{} {1}}标签时将内联css添加如下：

请参见下面的工作示例：

$('.newText').append('<p style="color: ' + randomColor + '">this text is added every 5 seconds</p>')

var fontColors
var randomColor

$(function() {
  fontColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'pink']
  randomColor = fontColors[Math.floor(Math.random() * fontColors.length)]
  
  $('.newText').append('<p style="color: ' + randomColor + '">original line of text</p>')

  setInterval(function() {
    randomColor = fontColors[Math.floor(Math.random() * fontColors.length)]
    $('.newText').append('<p style="color: ' + randomColor + '">this text is added every 5 seconds</p>')
  }, 5000)
})

在每个新的“附加”功能上更改字体颜色

2 个答案: