5

我试图让 div 元素中的每个字母从颜色数组中更改为随机颜色。然后在鼠标移出 div 时重置。

这是我到目前为止所得到的。我想我已经很接近了，除了它实际上不起作用。这是由本网站上的几个不同片段构建的。 

$(document).ready(function() {

    // COLOURS ARRAY
    var colours = Array("#ddd", "#333", "#999", "#bbb"), idx;

    $("DIV#header").hover(function(){

        $( $(this).text().split('')).each(function(index, character) {
            idx = Math.floor(Math.random() * colours.length);
            $(this).css("color", colours[idx]);
        });

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

});

它不会产生任何 JS 错误。悬停的第二个功能似乎有效，但不是第一个。任何帮助将不胜感激！

4

4 回答 4

8

您只能为元素添加样式，将每个字符包装在 a 中<span>并设置 span 样式。

#header {color: #ddd}​

<div id="header">Some text here</div>​

$(document).ready(function() {

    // COLOURS ARRAY
    var colours = Array("#ddd", "#333", "#999", "#bbb"), idx;

    $("#header").hover(function(){
        var header = $(this); 
        var characters = header.text().split('');
        header.empty();  
        var content = '';
        for(var i = 0; i < characters.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
        }
        header.append(content);
    }, function() {
        $(this).find('span').contents().unwrap();
    });

});

http://jsfiddle.net/vVNRF/

于 2012-09-23T20:33:30.220 回答
4

嗯，这正是 Musa 所说的，您不能将样式应用于文本节点，您需要<span>在每个字符周围添加一个元素。这是一些动态添加跨度的示例代码：

$(document).ready(function() {

    // COLOURS ARRAY
    var colours = ["#ddd", "#333", "#999", "#bbb"], 
        idx;

    $("DIV#header").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","#ddd");
    });

});​

http://jsfiddle.net/Mv4pw/

于 2012-09-23T20:39:00.777 回答
4

正如其他人指出的那样，您只能对元素进行样式设置，因此您需要将每个字母包装在它自己的元素中。这是执行此操作的示例方法。它也以递归方式工作，因此这将适用于包含其他元素的文本，如<b>、<a>等。下面的其他示例假设该 div 将只有文本，没有其他 HTML 标记。

var colours = Array("#ddd", "#333", "#999", "#bbb");

$('#header').hover(function(){
    wrapLetters(this);
    $('.random-color', this).css('color', function(){
        var idx = Math.floor(Math.random() * colours.length);
        return colours[idx];
    });
}, function(){
    $('.random-color', this).css('color', '#ddd');
});

// Wrap every letter in a <span> with .random-color class.
function wrapLetters(el){
    if ($(el).hasClass('random-color')) return;

    // Go through children, need to make it an array because we modify
    // childNodes inside the loop and things get confused by that.
    $.each($.makeArray(el.childNodes), function(i, node){
        // Recursively wrap things that aren't text.
        if (node.nodeType !== Node.TEXT_NODE) return wrapLetters(node);

        // Create new spans for every letter.
        $.each(node.data, function(j, letter){
            var span = $('<span class="random-color">').text(letter);
            node.parentElement.insertBefore(span[0], node);
        });

        // Remove old non-wrapped text.
        node.parentElement.removeChild(node);
    });
}

小提琴：http: //jsfiddle.net/aWE9U/2/

于 2012-09-23T20:48:39.817 回答
3

字符串不是元素，您不能向其添加 CSS 属性。您可以将字母放在 span 元素中，然后设置它们的样式，试试这个：

$(document).ready(function() {

    // COLOURS ARRAY
    var colours = Array("#ddd", "#333", "#999", "#bbb"), idx;

    $('DIV#header').hover(function(){

        $('span', this).each(function(index, character) {
            idx = Math.floor(Math.random() * colours.length);
            $(this).css("color", colours[idx]);
        });

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

});

http://jsfiddle.net/BC5jt/

于 2012-09-23T20:37:31.180 回答