如何实现点击左侧用户名在右侧展示用户详情（PHP+前端）

1. 修正左侧用户列表的HTML问题 #

循环中重复的id="chat_user_1"会导致DOM冲突，需移除或改为动态id，同时确保data-user-id正确绑定：

<div class="app-chat">
  <ul class="chat-users" style="height: calc(100vh - 400px)" data-simplebar="">
    <?php
    $InvMeta = mysqli_query($con, "SELECT * FROM investors_meta ORDER BY 1 DESC");
    if ($_SESSION['useradmin']=='Investor') {
      $InvMeta = mysqli_query($con, "SELECT * FROM investors_meta WHERE inv_id = ".$_SESSION['uid']." ORDER BY 1 DESC");
    }
    $S_NO = 0;
    while($row=mysqli_fetch_assoc($InvMeta)){
      $FetchInvData = mysqli_query($con,"SELECT * FROM users WHERE userId=".$row['inv_id']);
      $inv = mysqli_fetch_assoc($FetchInvData);
      $S_NO++;
    ?>
    <li>
      <a href="javascript:void(0)" class="px-4 py-3 bg-hover-light-black d-flex align-items-center chat-user bg-light" data-user-id="<?php echo $row['inv_id']; ?>">
        <span class="position-relative">
          <img src="assets/dist/images/profile/user-4.jpg" alt="user-4" width="40" height="40" class="rounded-circle">
        </span>
        <div class="ms-6 d-inline-block w-75">
          <h6 class="mb-1 fw-semibold chat-title"><?php echo $inv['full_name']; ?></h6>
          <span class="fs-2 text-body-color d-block"><?php echo $inv['mobile']; ?>, <?php echo $inv['userEmail']; ?></span>
        </div>
      </a>
    </li>
    <?php } ?>
  </ul>
</div>

2. 编写用户详情接口（get-user-details.php） #

接收用户ID参数，返回JSON格式的用户详情数据：

<?php
session_start();
include('your-db-connection.php'); // 替换为你的数据库连接文件

if(isset($_GET['user_id']) && is_numeric($_GET['user_id'])){
  $user_id = intval($_GET['user_id']);
  $query = mysqli_query($con, "SELECT u.*, im.* FROM users u LEFT JOIN investors_meta im ON u.userId = im.inv_id WHERE u.userId = ".$user_id);
  
  if(mysqli_num_rows($query) > 0){
    $user = mysqli_fetch_assoc($query);
    header('Content-Type: application/json');
    echo json_encode($user);
    exit;
  } 
  echo json_encode(['error' => '用户不存在']);
} else {
  echo json_encode(['error' => '无效的用户ID']);
}
?>

3. 前端JavaScript逻辑 #

监听用户点击事件，异步获取详情并渲染到右侧容器：

document.addEventListener('DOMContentLoaded', function() {
  const userItems = document.querySelectorAll('.chat-user');
  const detailContainer = document.querySelector('.chat-box');

  userItems.forEach(item => {
    item.addEventListener('click', function() {
      const userId = this.getAttribute('data-user-id');
      
      fetch(`get-user-details.php?user_id=${userId}`)
        .then(res => res.json())
        .then(data => {
          if(data.error){
            alert(data.error);
            return;
          }
          // 动态渲染详情内容
          detailContainer.innerHTML = `
            <div class="chat-list chat active-chat" data-user-id="${userId}">
              <div class="hstack align-items-start mb-7 pb-1 align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-3">
                  <img src="assets/dist/images/profile/user-4.jpg" alt="${data.full_name}" width="72" height="72" class="rounded-circle">
                  <div>
                    <h6 class="fw-semibold fs-4 mb-0">${data.full_name}</h6>
                    <p class="mb-0">${data.user_role || '无职位'}</p>
                    <p class="mb-0">${data.company_name || '无公司'}</p>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-4 mb-7">
                  <p class="mb-1 fs-2">Phone number</p>
                  <h6 class="fw-semibold mb-0">${data.mobile}</h6>
                </div>
                <div class="col-8 mb-7">
                  <p class="mb-1 fs-2">Email address</p>
                  <h6 class="fw-semibold mb-0">${data.userEmail}</h6>
                </div>
                <div class="col-12 mb-9">
                  <p class="mb-1 fs-2">Address</p>
                  <h6 class="fw-semibold mb-0">${data.address || '无地址'}</h6>
                </div>
                <div class="col-4 mb-7">
                  <p class="mb-1 fs-2">City</p>
                  <h6 class="fw-semibold mb-0">${data.city || '无城市'}</h6>
                </div>
                <div class="col-8 mb-7">
                  <p class="mb-1 fs-2">Country</p>
                  <h6 class="fw-semibold mb-0">${data.country || '无国家'}</h6>
                </div>
              </div>
              <div class="border-bottom pb-7 mb-4">
                <p class="mb-2 fs-2">Notes</p>
                <p class="mb-3 text-dark">${data.notes || '暂无备注'}</p>
              </div>
              <div class="d-flex align-items-center gap-2">
                <button class="btn btn-primary fs-2" onclick="editUser(${userId})">Edit</button>
                <button class="btn btn-danger fs-2" onclick="deleteUser(${userId})">Delete</button>
              </div>
            </div>
          `;
        })
        .catch(err => {
          console.error('请求错误:', err);
          alert('加载详情失败，请重试');
        });
    });
  });
});

// 编辑/删除辅助函数（可按需扩展）
function editUser(userId){
  window.location.href = `edit-user.php?id=${userId}`;
}

function deleteUser(userId){
  if(confirm('确定删除该用户？')){
    fetch(`delete-user.php?user_id=${userId}`)
      .then(res => res.json())
      .then(data => {
        if(data.success){
          alert('删除成功');
          document.querySelector(`[data-user-id="${userId}"]`).closest('li').remove();
          detailContainer.innerHTML = '<p class="text-center text-muted">请选择左侧用户查看详情</p>';
        } else {
          alert(data.error);
        }
      });
  }
}

4. 初始化右侧容器（可选） #

页面加载时若未选中用户，显示提示内容：

<div class="chat-box p-9" style="height: calc(100vh - 428px)" data-simplebar="">
  <p class="text-center text-muted">请选择左侧的用户查看详情</p>
</div>

核心优势 #

• 避免右侧容器重复渲染导致的布局混乱，通过动态填充内容实现复用
• 基于data-user-id实现用户标识的精准匹配
• 异步请求无需刷新页面，提升交互体验
• 修复了左侧列表重复ID的DOM冲突问题

内容的提问来源于stack exchange，提问作者Ivance Edwards