Question

我目前正在创建网络聊天，每当聊天框中显示消息时，将显示发送消息的用户并使用颜色进行标识。对于每个用户，我创建一个类，并使用上述函数为颜色样式赋值。

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)

如果您需要更改de background color，请使用属性“background-color”：

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

或者，如果您需要更改de font color，请使用属性“color”：

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

Answer 3

您的HTML中有错误 - ＆gt;

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);

＆＃34;粗体＆＃34;标签在跨度之前关闭。

修复它 - ＆gt;

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之后调用它...（并且您不需要特殊类） - ＆gt;

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);

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

为每个用户分配一种颜色

4 个答案: