Question

我试图让一小段文字中的每个字母都有不同的随机颜色。当我使用.hover时，我似乎只能这样做，但我希望它能立即执行操作（一旦页面加载）。请帮忙。我还想知道是否有人知道如何用css或Javascript在每个字母（设置颜色）上设置不同的颜色，因为当我尝试以这种方式进行时，它不会允许我在相同的div / id上调用函数（我试图拱起文本）。谢谢。

这是我的代码

var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
    idx;

$("#arch").hover(function(){
    var div = $(this); 
    var chars = div.text().split('');
    div.html('');     
    for(var i=0; i<chars.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx])
        div.append(span);
    }

}, function() {
    $(this).find('span').css("color","#FF0000");
});

Answer 1

    var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
    idx;

$(function() {
    var div = $('#arch'); 
    var chars = div.text().split('');
    div.html('');     
    for(var i=0; i<chars.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
        div.append(span);
    }
});

适合我。 jsFiddle

在执行任何jQuery之前，你必须确保加载DOM。

http://learn.jquery.com/using-jquery-core/document-ready/

Answer 2

尝试（未经测试）：

$(document).ready(function(){
    var div = $('#arch'); 
    var chars = div.text().split('');
    div.html('');     
    for(var i=0; i<chars.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx])
        div.append(span);
    }
}

基本上，您需要等待DOM加载，以便在您拨打$('#arch')时找到一个div！

我不确定你的意思是“试图修改文字”。

如何在Javascript中使文本中的每个字母成为不同的随机颜色

2 个答案: