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

Posted 2023-03-16

【中文标题】更改段落中随机字母的颜色

【英文标题】：Change the color of random letters in a paragraph

【发布时间】：2013-03-04 03:33:10

【问题描述】：

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

$('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 属性。 但是在控制台窗口中弹出一个错误说对象没有方法'css'

我做错了什么？

【问题讨论】：

您只能为 jquery 对象调用 css 方法。对于您的情况，您的数组元素只是字符串。

我做了......但这也无济于事

好吧，你的$.each 逻辑没有意义。 character 是一个数组，你不能在它上面使用 jQuery 方法。您需要为所有角色创建元素，更改它们的颜色并将它们附加到页面。

$.each 只能应用于 jQuery 对象，所以 jQuery 对象是什么，它们是您在成功执行 jQuery 查询字符串后获得的对象，例如 $("#para")。如果您想对 para 中的每个字母应用不同的颜色，您可能必须将每个字符放在不同的标签中，例如 div 或 span 像 A B

letteringjs.com

【参考方案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';


);

【讨论】：

@anubhav 你确实意识到覆盖 html 内容与清空元素并向右附加新字符是一样的......

是的，我愿意。但是在您的回答中，除了更改的字符之外，所有其他字符都消失了。所有字符都应该保留

@anubhavgupta 请找到更新的代码和更新的小提琴链接。早期的代码并不适用于所有情况。

把它放在一起真是太棒了，但我想知道不是将样式颜色设置为红色，而是如何将一个类添加到选定的字母，然后将该类删除给所有其他字母字母？ .addClass()/.removeClass() 似乎在这里不起作用。

@Murphy1976 这是个好主意。你也可以这样做。在 30 的 for 循环中，您可以说 $(charArray[pos]).addClass('red') 其中 red 类将包含 css 属性。我同意 +1

【参考方案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);
    );
);

【讨论】：

这就是我想要的。但不是清空 para div 并附加新字母，我需要它来动态更改 para 本身的颜色。

你不能在一个字符上调用一个 jQuery 方法。它必须在一个 jQuery 对象上。必须将其包裹在 HTML 元素周围。 <span> 元素是内联的，所以它们应该在视觉上做你想做的事情。运行时有什么问题？

没有问题。但最终目标是让 para 保持原样（$para.empty() 已过时），只需更改目标字母在 para 中的任何位置的颜色。您正在清空 para 然后附加它，这不是必需的

您不能使用 CSS 样式定位字母。修改 DOM 节点是必要的。删除所有内容并重新开始是最简单的方法。

@anubhav 是必需的。这才是重点。请参阅上面 Jan Dvorak 的评论