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

Answer 2

我只是稍微改造了Explosions，因为.reduce适用于IE9或以上（我认为）。我相信他能做出比以下更优雅的版本...但值得一试。虽然这给你所有的文字是随机的，但不确定这是你想要的。如果没有，抱歉。

var colours = Array("yellow", "black", "green", "orange","red","purple");
var newHtml = [];
$("#header").html(function (_, html) {
   $.each(html.split(','),function (_,obj) {
     newHtml.push("<span style='color: " + colours[Math.floor(Math.random() * colours.length)] + ";'>" + obj + "</span>");
    });
  return newHtml.join(',');
});

如何使用jquery在（，）拆分后随机更改文本的颜色

2 个答案: