Javascript 迭代高亮

Question

我试图让下面的代码始终使用我拥有的颜色数组中的颜色突出显示 var s2。在第一次迭代中，我希望它为 var s2 着色为“DarkSalmon”，在第二次迭代中，我希望它为 var s2 着色为“ForestGreen”，依此类推。出于某种原因，它没有这样做。有人请帮帮我。我在这里错过了什么？

var text =  obj[0].srcLanguageSentence.text;

var strArry = [];  
var colorArr = ["DarkSalmon", "ForestGreen", "Brown"];
for(var i=0; i<obj[0].srcLanguageSentence.roles.length; i++)
{

    // create variables representing substrings of the Source language Sentence
    var s1 = text.substring((obj[i].srcLanguageSentence.roles[i].beginOffset - obj[i].srcLanguageSentence.roles[i].beginOffset),(obj[i].srcLanguageSentence.roles[i].beginOffset - 1));
    var s2 = text.substring(obj[i].srcLanguageSentence.roles[i].beginOffset,obj[i].srcLanguageSentence.roles[i].endOffset);
    var s3 = text.substring(obj[i].srcLanguageSentence.roles[i].endOffset,obj[i].srcLanguageSentence.text.length);

    strArry.push('<h4>'+s1+'</h4>')
    //strArry.push('<h4>'+'<font color='"+colorArr[i]+"'>"+s2+'</font>'+'</h4>')

    if(i == obj[0].srcLanguageSentence.roles.length-1)
    {
        strArry.push('<h4>'+s3+'</h4>');
    }

    text =  s3;
}

Answer 1

你在这部分有错误。

strArry.push('<h4>'+'<font color="'+colorArr[i]+'">"'+s2+'</font>'+'</h4>');

另外，我假设这些是您要附加到 DOM 的节点。