Question

我有一个字符串需要拆分才能更改每个单词的颜色。

这是我的HTML代码

<div class="header">
    <span class="title"><Lorem ipsum dolor sit amet </span>
    <span class="title"><Lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus tempus libero lectus. </span>
    <span class="title"><Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur est mi egestas nec lacus eget finibus  </span>
</div>

最多需要五个字的颜色：

第一个字：＃EE7F00
第二个字：＃EA650D
第三个字：＃E64415
第四个字：＃EA650D
第五个字：＃EE7F00

只需要每两个单词改变颜色就需要六到十二个单词

每三个单词需要更改十二个以上的单词。

非常感谢任何帮助。

Answer 1

这是一个开始：

// iterate throught the .title spans
$('.title').each(function(idx) {

    // get the text from the span
    var txt = $(this).text();

    // split the words separated by a space into an array
    var words = txt.split(" ");
    var html = "";

    // iterate through the words and wrap them with a span and color 
    for(var i=0; i<words.length; i++) {
        html += '<span style="color:'+getColor(i)+';">'+words[i]+'</span> ' ;
    }

    // write the generated html back to the dom
    $(this).html(html);
});

function getColor(i) {
    var color = "";
    if(i == 0) color = "#EE7F00";
    else if(i == 1) color = "#EA650D";
    else if(i == 2) color = "#E64415";
    else if(i == 3) color = "#EA650D";
    else if(i == 4) color = "#EE7F00";   
    else if(i >= 5 && i <= 11) return getColor(Math.floor((i - 5) / 2));
    else if(i >= 12) return getColor(Math.floor((i - 12) / 3));
    return color;
}

如果我的颜色逻辑正确，我不能100％确定，所以getColor函数用于根据当前单词的索引确定颜色。

这是一个小提琴：http://jsfiddle.net/nos5mt7x/

Answer 2

我认为这里的关键字应该是

模数，返回除法余数：例如

5％2 = 1
分割功能javascript：

array.split（＆＃34;＆＃34;）;
每个函数jquery（将函数应用于数组的每个元素，请参阅http://learn.jquery.com/using-jquery-core/iterating/）
javascript中的join函数组合数组。

所以代码看起来像这样： http://jsfiddle.net/sbpaw8aw/1/

$(document).ready(function() {
    // Color list
    //var arrColors = ["#EE7F00", "#EA650D", "#E64415", "#EA650D", "#EE7F00"];
    // some colors that are more distinct
    var arrColors = ["#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#000000"];

    // the span you'd like to check
    var spantext = ".from-twelve";

    var textstr = $(spantext).text().trim();
    // remove the text from the DOM
    $(spantext).empty();
    var arrTextstr = textstr.split(" ");
    var ci = 0;
    $.each(arrTextstr, function(index, value) {
        // get the index of the color list
        if(arrTextstr.length<= 5) {
            ci = (index+1)%5;
        } else if(arrTextstr.length<=12) {
            ci = ((index+1+(index+1)%2)/2-1)%5;    
        } else {
            ci = ((index-index%3)/3)%5;
        }
        // colorize the word
        arrTextstr[index] = "<font color=\""+arrColors[ci]+"\">"+value+"</font>";
    });
    // reattach the text
    $(spantext).append(arrTextstr.join(" "));
});

现在唯一的事情是，每个单词都是＆＃34;有色的＆＃34; seperatly。我不知道这对你来说是否有问题，但至少它有效： - ）

干杯 [R

按空格分割字符串比更改每个单词的文本颜色

2 个答案: