更改段落中隨機字母的顏色

Question

我想將段落中某些隨機字符的顏色更改爲單擊按鈕上的紅色。請找到我的代碼。我在這有一些錯誤。所有的

$('input').click(function(){ 

    var para = $('#para'); 
    var position = Math.floor(Math.random()*100); 
    var character = []; 

    var i=0 
    while (i <= 30) 
    { 
     character[i] = para.html().substr(position*(i+1), 1); 
     i++; 
    } 

    $.each(character, function() { 
    character.css('color','red'); 
    }); 

}); 

首先我創建了將包含從段落 接着我用each()遍歷每個所述陣列中的元件的應用的CSS屬性30個隨機字母陣列。 但在控制檯窗口彈出一個錯誤，說對象沒有方法'css'

我在做什麼錯？

Answer 1

首先，CSS方法只適用於jQuery對象。你有字符數組中的字符串。 css方法不適用於字符串。其次，你的每種方法寫錯了。它應該是這樣的

$.each(character, function(index, value) { 
    // Do something 
}); 

對於您的問題聲明，以改變一些隨機字符顏色在你的字符串。這是Fiddle。嘗試一下。

這裏是代碼：

$('input').click(function(){ 

var para = $('#para'); 
var charArray = $('span', para); 

// case: No span (Initial String) 
if (charArray.length === 0) { 
    var html = para.html(); 
    var newArr = []; 
    var len = html.length; 
    for (var i=0; i<len; i++) { 
     newArr.push('<span>' + html[i] + '</span>'); 
    } 
    html = newArr.join(''); 
    para.html(html); 
    charArray = $('span', para); 
} 

// Reset all spans 
$.each(charArray, function(i, value) { 
    value.style.color = ''; 
}); 

var paralen = charArray.length; 

for (var i=0; i<30; i++) { 
    var pos = Math.floor(Math.random()*100); 
    pos = pos % paralen; 
    charArray[pos].style.color = 'red'; 
} 

}); 

Answer 2

您需要查看的文檔$.each。一個可能的解決方案：

$('input').click(function() { 

    var $para = $('#para'); 
    var position = Math.floor(Math.random()*100); 
    var character = []; 

    for (var i=0; i <= 30; i++) { 
     character[i] = $("<span>" + $para.text().substr(position*(i+1), 1) 
            + "</span>"); 
     character[i].css('color', 'red'); 
    } 

    $para.empty(); 

    $.each(character, function(idx, val) { 
     $(val).appendTo($para); 
    }); 
});