为每个用户分配一种颜色

Question

我目前正在创建网络聊天，每当聊天框中显示一条消息时，发送消息的用户就会显示并用颜色标识。我为每个用户创建一个 class 并使用上述函数为颜色样式分配一个值。

newHTML = '';

$.each(data, function(index, element) {

    $('.user_' + element.senderId).attr("style","color:" + randColor());

    newHTML = newHTML + '<div id="boxMsg"><b><span class="user_' + element.senderId + '">' 
                      + element.senderId + '</b></span></br>' + element.message + '&nbsp&nbsp<span class="dateMsg">' + dateTime.substring(11, 16) + '</span></div>';    

    });

$('#chatbox').append(newHTML);           
},

JSON 协议用于提取与聊天中显示的消息有关的所有信息。但它仍然不起作用，所有用户名都是黑色的。你知道我做错了什么吗？

提前感谢您的回复！

编辑：感谢@Evan，我解决了第一部分和分配随机颜色的功能。但是，只有第一位和第三位成员的聊天颜色发生了变化。其他人还是黑的。无论如何，我留下函数 randColor() 的代码。

function randColor(){
                var letters = '0123456789ABCDEF'.split('');
                var color = '#';
                for (var i = 0; i < 6; i++ ) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            };

EDIT.2：我已经更正了函数以更多地反映我正在处理的函数。

Answer 1

for (var i = 0; i <= nUsers.length; i++ )

应该是

for (var i = 0; i < 6; i++ )

形成十六进制颜色。它应该始终为 6（或者对于短的十六进制颜色为 3）。

Answer 2

尝试使用.attr("style",properties)

如果您需要更改背景颜色，请使用属性 "background-color":

$('.user_' + element.senderId).attr("style","background-color:" + randColor());

或者，如果您需要更改字体颜色，请使用属性 "color":

$('.user_' + element.senderId).attr("style","color:" + randColor());

Answer 3

您的 HTML-->

有误

var newHTML = '';
 newHTML = newHTML + '<div id="boxMsg"><b><span class="user_' + element.senderId + '">' + element.senderId + '</b></span></br>' + element.message + '&nbsp&nbsp<span class="dateMsg">' + dateTime.substring(11, 16) + '</span></div>';

$('#chatbox').append(newHTML);

"bold" 标签在跨度之前关闭。

修复它 -->

newHTML = newHTML + '<div id="boxMsg"><b><span class="user_' + element.senderId + '">' + element.senderId + '</span></b></br>' + element.message + '&nbsp&nbsp<span class="dateMsg">' + dateTime.substring(11, 16) + '</span></div>';

除此之外，您可以在构建 HTML 时调用 randomColor，而不是在 jquery 之后调用它...（您不需要特殊的 class)-->

newHTML = newHTML + '<div id="boxMsg"><b><span style="color:'+randColor()+'">' + element.senderId + '</span></b></br>' + element.message + '&nbsp&nbsp<span class="dateMsg">' + dateTime.substring(11, 16) + '</span></div>';

Answer 4

我设法解决了这个问题并正确地为每个用户分配了一种颜色。这是最终代码的样子：

function randColor(){
                var letters = '0123456789ABCDEF'.split('');
                var color = '#';
                for (var i = 0; i < 6; i++ ) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            };
            userColor = [];
            userColor.push(randColor());
            $('.user_' + element.senderId).css("color", userColor);     

            // Create box messages of the other users           
            var dateTime = element.timestamp;
            newHTML = '<div id="boxMsg"><b><span class="user_' + element.senderId +'" style="color:'+ userColor +'">'+ element.senderId + '</span></b></br>' 
                      + element.message + '&nbsp&nbsp<span class="dateMsg">' + dateTime.substring(11, 16) + '</span></div>';    

            $('#chatBox').append(newHTML);

我所做的是创建一个数组，将获得的颜色存储在其中，最后将此数组中的一个元素分配给每个用户的每个 class。感谢大家的回答！

为每个用户分配一种颜色

Assign to each user a color

javascript

jquery

json

chat