1

我正在尝试解决这个问题，但我无法解决它。我从数据库中获取文本，一个滚动的字幕文本，关键是，我想在每个逗号之后随机更改文本的颜色（，）分离...我可以随机更改页面加载上的文本，但整个文本都已更改。我想在 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");
    });
4

2 回答 2

3

$("#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

于 2013-02-23T05:46:22.993 回答
1

我只是重新设计了 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(',');
});
于 2013-02-23T08:10:26.090 回答