如何实现一个UI对应多个联系人

像聊天列表一样 点进去会对应不同的头像不同的名字 不可能每个人丢做一个聊天框的 所以打算用一个聊天框来实现不同头像不同昵称 要怎么做才能实现点击不同的人传递不同的头像呢？

一种方法是使用一个数据结构来存储用户信息，包括用户名、头像和其他相关信息。然后在点击不同的人时，你可以使用这个数据结构来获取用户信息，并将其显示在聊天框中。

这里是一个示例数据结构：

users = [
    {
        "name": "Alice",
        "avatar": "https://example.com/alice.jpg",
        "other_info": "..."
    },
    {
        "name": "Bob",
        "avatar": "https://example.com/bob.jpg",
        "other_info": "..."
    },
    ...
]

然后，你可以在点击用户时使用这些信息来更新聊天框。例如，你可以使用 JavaScript 来更新 DOM 元素，将用户信息插入聊天框中。

document.getElementById("chat-box").innerHTML = `
    <img src="${users[i].avatar}" alt="${users[i].name}'s avatar">
    <p>${users[i].name}</p>
`;

这只是一个简单的例子，你可以根据你的需要进行更多的自定义。