javascript - 如何使用 jquery 在 (,) 拆分后随机更改文本的颜色

Question

我正在尝试解决这个问题，但我无法解决它.. 我从数据库中获取文本，滚动的字幕文本， 关键是，我想随机更改文本的颜色 在每个逗号(，)分隔之后...... 我可以随机更改页面加载的文本，但整个 文本已更改。我想在 omma 之后更改文本.. 例如。 你好，我是，尼克，
现在你好应该以不同的颜色显示，等等......

这是我的代码，但它所有的文本颜色都是随机的

        var colours = Array("yellow", "white", "green", "orange"), indexNo;
        $('#header').each(function (index, character) {
            indexNo = Math.floor(Math.random() * colours.length);
            //alert(idx);
            $('#header').css("color", colours[indexNo]);

        });

    }, function () {
        $('#header', this).css("color", "#ddd");
    });

Answer 1

$("#header").each 不是必需的，因为只有其中一个。您可以只使用字符串 .split 方法。

$("#header").html(function (_, html) {
    return html.split(',').reduce(function (prev, cur) {
        return prev + "<span style='color: " +
          colours[Math.floor(Math.random() * colours.length)] + ";'>"
          + cur + "</span>";
    }, '');
});

http://jsbin.com/abikin/1/edit

编辑:如果逗号不必放在跨度内，您可以改用它:

return html.split(',').map(function (elem) {
    return "<span" ... + elem + "</span>"
}).join(',');

http://jsbin.com/abikin/3/edit