Изменить цвет шрифта при каждой новой функции добавления

Question

У меня есть страница, на которой я использую функцию добавления для добавления новой строки текста (".newText") каждые 5 секунд.

Это то, что у меня есть в настоящее время:

    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

Вы можете добавить встроенный CSS к своему тегу p, когда добавляете его следующим образом:

$('.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)
})

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

<div class="newText"></div>

Answer 2

Это должно сработать.Вместо того, чтобы добавить цвет к вашему .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>

ОБНОВЛЕНИЕ

Если кто-то ищет чистое решение JS, следующий код должен выполнитьтрюк.

let fontColors;
let randomColor;

function addNewText() {
  // Set all possible font colors.
  fontColors = ['red','orange','yellow','green','blue','indigo','violet','pink'];
  
  // Generate a random number, which will represent a font color.
  randomColor = fontColors[Math.floor(Math.random() * fontColors.length)]
  
  // Set a new line.
  const container = document.querySelector('.newText');
  const newLine = document.createElement('p');
  newLine.textContent = 'original line of text';
  container.append(newLine);
  
  // Now set an interval, in which we will be adding new lines every
  // certain amount of time.
  setInterval( () => {
    const newLine = document.createElement('p');
    newLine.textContent = 'this text is added every 5 seconds';
    randomColor = fontColors[Math.floor(Math.random() * fontColors.length)];
    newLine.style.color = randomColor;
    container.append(newLine);
  }, 5000);
  
};

addNewText();

<span class="newText"></span>