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 エラーは発生しません。ホバーの2番目の機能は機能しているようですが、最初の機能は機能していません。どんな助けでもありがたく受け取られます！

4

4 に答える 4

8

<span>要素にスタイルを追加し、各文字を a でラップし、スパンをスタイルすることしかできません。

#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 プロパティを追加することはできません。文字をスパン要素に入れてスタイルを設定できます。これを試してください：

$(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 に答える