Javascript 创建具有状态图片的用户列表

我想做一个用户列表，并有一个图像指示他们的在线状态，但我一直无法找到一个合适的选项，这样做与常规html选择标记。我还希望能够为每个用户提供选项，但这对我来说不是问题

如果我的解释不是很好，我已经创建了一个图像来帮助形象化我想要得到的东西。我希望能够动态更改图片/状态指示器（无需刷新页面或在客户端执行某些操作）

如果用户列表没有硬编码到html中，是否有办法为每个用户设置图片？（用户将从数据库查询中放入列表）

注意：如果有帮助的话，我将使用Node.js和socket.io作为本文的联机部分

供参考的图片：

编辑：我正在工作的网站上类似设计的JSFiddle用户列表（不能直接链接到网站，它不是外部连接的服务器）：

HTML:

---

只是想澄清一下，我不需要帮助获取用户的联机状态，而是需要帮助将状态指示器放在列表中。这里最简单的解决方案似乎是让每个客户端向服务器创建一个WebSocket，并让服务器在用户联机或脱机时发送事件

要实际更改图像，可以执行以下操作：

joesNumber=22;
WebSocket.onmessage=function(event){
    data=JSON.parse(event.data);
    //Interpret data here
    document.getElementsByClassName("onlineIndicator")[joesNumber].src="./fancyIndicatorImage.png.jpg";
}

---

你可以发布一个你尝试过的JSFiddle，这样我们就可以编辑它来满足你的需要/把你推向正确的方向。寻找AJAX。您可以查询服务器的联机状态（无需页面刷新），并使用javascript更新GUI指示。我编辑了我的原始帖子，以包含我现在拥有的JSFIDLE。这是否适用于html select标记？我已经有了代码设置并正在进行联机状态检索，但是我找不到一个好的方法来设置图片。@Blubberguy22您需要在每个用户的标签中都有一个图像（

option.text=“a person”

），但是无论使用哪种解决方案，您都需要它。仅供参考，您可能需要两个图像（脱机和联机），可以在这两个图像之间切换。这不起作用。我认为选项元素只支持基本文本。它只显示为

。

function addUser() {
    //In actual code gets users from connections within socket.io
    var option = document.createElement("option");
    option.text = "A person";
    userList.add(option);
}

joesNumber=22;
WebSocket.onmessage=function(event){
    data=JSON.parse(event.data);
    //Interpret data here
    document.getElementsByClassName("onlineIndicator")[joesNumber].src="./fancyIndicatorImage.png.jpg";
}