聊天应用程序的 UserList 中的用户获取错误的 CSS 值。（jQuery + socketio）答案

【问题标题】：A user in a UserList of a chat Application, getting the wrong CSS value. (Jquery + socketio)聊天应用程序的 UserList 中的用户获取错误的 CSS 值。（jQuery + socketio）
【发布时间】：2019-08-07 06:39:02
【问题描述】：

我正在尝试一个聊天应用程序的功能，其中包含已加入该聊天的用户列表。当特定用户断开连接/离开聊天时，特定用户的颜色应在列表中更改（即，如果 andy，rubin 是两个成员并且 rubin 离开他的名字应该用颜色反映，而 andy 的名字不应该改变颜色）。我的问题是，如果一个人离开，我会得到那种颜色来反映列表中的所有成员（即，如果他们中的任何一个离开，andy 和 rubin 都会改变颜色）

server.js

socket.on('disconnect',function(data){
    console.log('user disconnected');
    if(!socket.nickname)   
         return;
      socket.broadcast.emit('userDisconnect',{nick:socket.nickname});  
})

chat.js

socket.on('userDisconnect',function(data){
    //  var str = [];
    // str.push(data.nick)
    // for(var i= 0;i<data.length;i++){
    //  str = data.nick[i]
    //  }
    //  $users.text(data.nick).css("color","red")   //disconnected user is only reflected on the list,rest of them vanish
    $users.val(data.nick).css("color","red")
})

注意：我尝试了其他一些反映在代码注释部分中的东西

我希望只有一个特定的用户是列表应该在他离开时改变颜色，但实际值是当任何用户离开时所有的人都会得到颜色。

【问题讨论】：

标签： javascript jquery css socket.io

【解决方案1】：

如果你查看 jQuery val() 的文档，它会说：

获取匹配元素集合中第一个元素的当前值或设置每个匹配元素的值。

https://api.jquery.com/val/

所以基本上你在做什么，你将所有用户的值设置为data.nick。 text() 方法也是如此。

最好通过 id 匹配用户，在这种情况下它可能是用户的昵称，但为此您需要在呈现用户时分配该 id。然后你可以这样做：

socket.on('userDisconnect',function(data){
    $(`#id_${data.nick}`).css("color","red")
})

【讨论】：

我现在意识到了。我对要进行的更改有点困惑。应该在客户端代码或服务器端代码上进行更改
取决于您如何呈现用户列表。如果是服务器端，则应在此处进行更改。
你能看一下吗，这是服务器代码 socket.on('new user',function(data,callback){ callback(true); socket.nickname=数据; name=socket.nickname; users[name] = socket; io.sockets.emit('usernames',Object.keys(users)); });
客户端代码，socket.on('usernames',function(data){ var str=' '; for(var i=0;i'; } $users.html(str).css("color","black"); });
你可以使用 JS 模板插值来添加你的 html:socket.on('usernames', function(data) { var str = ' '; for (var i = 0; i <p id="#id_${data[i]}">${data[i]}</p>; } $users.html(str).css("color", "black"); })