Динамически меняет цвет текста из массива

Question

Я использую JQuery для выполнения некоторых действий с веб-сайта, над которым я работаю; Я выполняю некоторые запросы, и из данных, которые я получаю, есть некоторые значения с именами цветов, и я храню их в массиве; то, что я хочу сделать, это изменить цвет каждого из них, потому что иногда по каждому запросу есть разные цвета.

I.E. Пользователь запрашивает; из данных есть значение «Зеленый» и «Красный», прежде чем отправлять их на страницу, я хочу изменить цвет «Зеленый» на «Зеленый» и «Красный на красный». Если будет выполнен другой запрос и цвета на этот раз будут синими и желтыми, я хотел бы снова изменить цвета с помощью процесса сверху.

Это то, что у меня есть:

var typeArr = []; 
for (let l in data.types) { 
     typeArr.unshift(data.types[l].type.name); //data.types is the data from the request 
    } 

//This is the appended info at the page 
$('#types').html(`${typeArr[0].capitalizeFirstLetter()}`); 
if (typeArr[1] !== undefined) 
{ 
    $('#types').append(`/${typeArr[1].capitalizeFirstLetter()}`); 
} 

Я точно не произошла ошибка; Я просто хочу знать, как это сделать. Это то, что у меня есть, и оно показывает имена в правильном порядке, но я хочу изменить цвет слов. Максимальное количество слов в массиве для каждого запроса.

Answer 1

Если вы хотите украсить каждое слово с его цветом, вам нужно обернуть его в HTML-тег, в этом случае я использовал <span></span> для примера.

$("#testme").click(function(){ 
 
    var arr = [ "Red", "Blue"]; 
 
    var selectedWord = "Red"; 
 

 
    if($.inArray(arr, selectedWord)){ 
 
     var newtext = $("<span>"+selectedWord+"</span>").css("color", selectedWord.toLowerCase()); 
 
     $("#myDiv").append(newtext); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="myDiv">Text will appear here.</div> 
 
<button id="testme">Test me!</button>

Answer 2

Все еще не совсем уверен, что вы ищете. Однако, в соответствии с вашим комментарием

увидеть, если слово в массиве, если он находится в массиве, изменить цвет

Так это то, что вам нужно? ref

jQuery.inArray(value, array [, fromIndex ]) 

Использование, например

<div id="myDiv">something</div> 

& JQuery

var arr = [ "Red", "Blue"]; 
if(jQuery.inArray("Blue", arr)>0){ 
    $("#myDiv").css('background-color', 'blue'); 
}