jquery - 更改段落中随机字母的颜色

我想在单击按钮时将段落中一些随机字符的颜色更改为红色。请找到我的代码。我在这方面有一些错误。

$('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');
   });

});

首先，我创建了一个数组，其中包含一个段落中的 30 个随机字母
接下来，我使用 each() 迭代数组中的每个元素以应用 css 属性。
但是控制台窗口中弹出一个错误，说 object has no method 'css'

我究竟做错了什么 ？

最佳答案

首先，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';
}

});

关于jquery - 更改段落中随机字母的颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15432075/