如何在点击用户姓名时动态显示其详细信息（左右分栏交互实现）-js教程-PHP中文网

如何在点击用户姓名时动态显示其详细信息（左右分栏交互实现）

本文详解如何通过 php 后端数据预加载 + 前端 javascript 事件绑定，实现左侧用户列表点击后，右侧实时显示对应用户详情的响应式交互效果，避免重复请求、保持布局稳定且代码可维护。

本文详解如何通过 php 后端数据预加载 + 前端 javascript 事件绑定，实现左侧用户列表点击后，右侧实时显示对应用户详情的响应式交互效果，避免重复请求、保持布局稳定且代码可维护。

在构建用户管理类后台界面（如投资者管理系统）时，常见的左右分栏布局需满足：左栏为可滚动用户列表，右栏为当前选中用户的完整详情面板。关键挑战在于——不能将右栏内容嵌入循环生成（否则所有用户详情同时渲染，造成性能浪费与 DOM 冗余），也不能每次点击都发起 AJAX 请求（增加延迟与服务压力）。最佳实践是：服务端一次性预加载全部用户数据并隐藏渲染，前端通过 data-user-id 属性精准控制显隐逻辑。

✅ 推荐实现方案：服务端预加载 + 前端动态切换

1. 左侧用户列表（保持原结构，仅增强语义）

确保每个用户项携带唯一标识：

<a href="javascript:void(0)" class="px-4 py-3 bg-hover-light-black d-flex align-items-center chat-user" data-user-id="<?php echo htmlspecialchars($row['inv_id']); ?>">
  <span class="position-relative">
    <img src="assets/dist/images/profile/user-4.jpg" alt="user"    style="max-width:90%"   style="max-width:90%" class="rounded-circle"></span>
  <div class="ms-6 d-inline-block w-75">
    <h6 class="mb-1 fw-semibold"><?php echo htmlspecialchars($inv['full_name']); ?></h6>
    <span class="fs-2 text-body-color d-block">
      <?php echo htmlspecialchars($inv['mobile']); ?>, <?php echo htmlspecialchars($inv['userEmail']); ?></span>
  </div>
</a>

✅ 注意：使用 htmlspecialchars() 防止 XSS 攻击；data-user-id 是后续 JS 匹配的核心依据。

2. 右侧详情区（重构为「模板容器」+ 多个隐藏详情块）

将原静态详情

替换为 循环生成的多个带 data-user-id 的详情区块，初始全部隐藏：

<div class="chat-box p-9" style="height: calc(100vh - 428px)" 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 = " . (int)$_SESSION['uid'] . " ORDER BY 1 DESC");
  }

  while ($row = mysqli_fetch_assoc($InvMeta)) {
    $FetchInvData = mysqli_query($con, "SELECT * FROM users WHERE userId = " . (int)$row['inv_id']);
    $inv = mysqli_fetch_assoc($FetchInvData);

    // 安全转义输出内容
    $fullName = htmlspecialchars($inv['full_name'] ?? 'N/A');
    $mobile = htmlspecialchars($inv['mobile'] ?? 'N/A');
    $email = htmlspecialchars($inv['userEmail'] ?? 'N/A');
    $address = htmlspecialchars($inv['address'] ?? 'N/A');
    $city = htmlspecialchars($inv['city'] ?? 'N/A');
    $country = htmlspecialchars($inv['country'] ?? 'N/A');
    $notes = nl2br(htmlspecialchars($inv['notes'] ?? 'No notes.'));
    ?><div class="chat-list chat user-detail" data-user-id="<?php echo (int)$row['inv_id']; ?>" style="display: none;">
      <div class="hstack align-items-start mb-7 pb-1 justify-content-between">
        <div class="d-flex align-items-center gap-3">
          <img src="assets/dist/images/profile/user-4.jpg" alt="<?php echo $fullName; ?>"    style="max-width:90%"   style="max-width:90%" class="rounded-circle"><div>
            <h6 class="fw-semibold fs-4 mb-0"><?php echo $fullName; ?></h6>
            <p class="mb-0">Investor</p>
            <p class="mb-0">— Portfolio Management System</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-4 mb-7">
          <p class="mb-1 fs-2">Phone</p>
          <h6 class="fw-semibold mb-0"><?php echo $mobile; ?></h6>
        </div>
        <div class="col-8 mb-7">
          <p class="mb-1 fs-2">Email</p>
          <h6 class="fw-semibold mb-0"><a href="mailto:<?php%20echo%20%24email;%20?>"><?php echo $email; ?></a></h6>
        </div>
        <div class="col-12 mb-9">
          <p class="mb-1 fs-2">Address</p>
          <h6 class="fw-semibold mb-0"><?php echo $address; ?></h6>
        </div>
        <div class="col-4 mb-7">
          <p class="mb-1 fs-2">City</p>
          <h6 class="fw-semibold mb-0"><?php echo $city; ?></h6>
        </div>
        <div class="col-8 mb-7">
          <p class="mb-1 fs-2">Country</p>
          <h6 class="fw-semibold mb-0"><?php echo $country; ?></h6>
        </div>
      </div>
      <div class="border-bottom pb-7 mb-4">
        <p class="mb-2 fs-2">Notes</p>
        <p class="mb-0 text-dark"><?php echo $notes; ?></p>
      </div>
      <div class="d-flex align-items-center gap-2">
        <button class="btn btn-primary fs-2 edit-btn" data-id="<?php echo (int)$row['inv_id']; ?>">Edit</button>
        <button class="btn btn-danger fs-2 delete-btn" data-id="<?php echo (int)$row['inv_id']; ?>">Delete</button>
      </div>
    </div>
  <?php } ?>
</div>

3. 前端交互逻辑（轻量、可靠、无框架依赖）

在页面底部添加初始化脚本：

<script>
document.addEventListener('DOMContentLoaded', function () {
  // 缓存常用元素
  const userLinks = document.querySelectorAll('.chat-user');
  const detailContainers = document.querySelectorAll('.user-detail');

  // 点击左侧用户触发显示
  userLinks.forEach(link => {
    link.addEventListener('click', function () {
      const targetId = this.getAttribute('data-user-id');

      // 隐藏所有详情
      detailContainers.forEach(el => el.style.display = 'none');

      // 显示匹配详情（若存在）
      const targetDetail = document.querySelector(`.user-detail[data-user-id="${targetId}"]`);
      if (targetDetail) {
        targetDetail.style.display = 'block';

        // 可选：滚动到顶部，提升体验
        targetDetail.closest('.chat-box').scrollTop = 0;
      }
    });
  });

  // 【进阶建议】首次加载默认显示第一个用户详情
  if (userLinks.length > 0 && detailContainers.length > 0) {
    const firstId = userLinks[0].getAttribute('data-user-id');
    const firstDetail = document.querySelector(`.user-detail[data-user-id="${firstId}"]`);
    if (firstDetail) firstDetail.style.display = 'block';
  }
});
</script>

⚠️ 关键注意事项

SQL 安全性：所有 $_SESSION['uid'] 和 $row['inv_id'] 必须强制类型转换（如 (int)）或使用 PDO 预处理，杜绝 SQL 注入。
性能权衡：此方案适合用户量 ≤ 500 条的场景；若数据量极大，应改用「懒加载 + AJAX」模式。
样式隔离：.user-detail { display: none; } 应定义在 CSS 中，而非内联，便于统一维护。
无障碍支持：为 .chat-user 添加 role="button" 和 aria-expanded 属性，提升可访问性。
错误兜底：JS 中应检查 targetDetail 是否存在，避免空引用报错。

该方案兼顾开发效率、运行性能与代码可读性，是 PHP + Bootstrap 类项目中实现用户详情联动的经典范式。