我想制作一个用户列表，并有一个图像来指示他们的在线状态，但我一直无法找到合适的选项来使用常规的 html 选择标签。我还希望能够为每个用户提供选项，但这对我来说不是问题。
如果我的解释不是很好，我已经创建了一个图像来帮助可视化我想要得到的东西。我希望能够即时更改图片/状态指示器(无需刷新页面或在客户端执行某些操作)。
如果用户列表没有硬编码到 html 中，是否有办法为每个用户设置图片？ (用户会从数据库查询到列表中)
注意:如果有帮助的话，我正在使用 Node.js 和 socket.io 作为在线部分。
引用图片:
编辑:来 self 正在处理的网站的类似用户列表设计的 JSFiddle(不能直接链接到网站，它不是外部连接的服务器):http://jsfiddle.net/Blubberguy22/LN45a/28/
HTML:
<body>
<div id="usersOptions" style="background-color: #ddeeff; left: 0; top: 0; position:absolute;
height:260px; width:230px; border-style:inset;
border-width: 0px; margin: 0; z-index: 300; "> <strong>Users Online:</strong>
<select id='userList' style="width: 100%; height: 100%;" multiple></select>
<button id='makeFakeUser' onclick="addUser();">AddUser</button>
</body>
Javascript:
function addUser() {
//In actual code gets users from connections within socket.io
var option = document.createElement("option");
option.text = "A person";
userList.add(option);
}
澄清一下，我不需要帮助来获取用户的在线状态，而是需要将状态指示器放在列表中的用户旁边。
最佳答案
这里最简单的解决方案似乎是让每个客户端创建一个到服务器的 WebSocket，并让服务器在用户上线或下线时发送一个事件。
要真正改变图像，你可以这样做:
joesNumber=22;
WebSocket.onmessage=function(event){
data=JSON.parse(event.data);
//Interpret data here
document.getElementsByClassName("onlineIndicator")[joesNumber].src="./fancyIndicatorImage.png.jpg";
}
关于javascript - 创建具有状态图片的用户列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25040616/