当前位置：首页 > 文章列表 > 文章 > 前端 > JSON数据列表展示与点击展开方法

JSON数据列表展示与点击展开方法

2026-03-20 15:39:39 0浏览收藏

✅ 关键设计思路

数据挂载而非重复查询：不再在 showDetails() 中尝试访问外部 data 或使用未定义变量（如原代码中的 i 和 data.personen[i]），而是将每条人员对象直接附加到对应
元素上（li.personData = person）。点击时通过 e.target.personData 即可安全获取上下文数据。
事件委托提升性能：为整个
1. 单独添加（避免内存泄漏与性能损耗）。通过 e.target.nodeName === 'LI' 判断触发源，确保仅响应有效点击。
2. 视图容器语义化隔离：所有动态内容统一注入
  ，避免污染或其他布局区域，便于样式控制与后续扩展。

? 完整实现代码

HTML 结构（精简版）




  
  人员信息管理
  


  人员信息管理

JavaScript 逻辑（script.js）

// 加载并渲染人员列表
fetch('data.json')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return res.json();
  })
  .then(data => createListContact(data))
  .catch(err => console.error('数据加载失败:', err));

function createListContact(data) {
  const mainView = document.querySelector('main.view');
  mainView.innerHTML = ''; // 清空旧内容

  const ol = document.createElement('ol');
  ol.classList.add('list-view');
  ol.addEventListener('click', showDetails); // 事件委托

  data.personen.forEach((person, index) => {
    const li = document.createElement('li');
    li.classList.add('button');
    li.id = `person-${index}`;
    li.textContent = `Name: ${person.nachname}, ${person.vorname}`;
    li.personData = person; // ✅ 关键：将数据绑定到 DOM 节点
    ol.appendChild(li);
  });

  mainView.appendChild(ol);
}

function showDetails(e) {
  if (e.target.nodeName !== 'LI') return;

  const { personData } = e.target;
  const details = document.createElement('div');
  details.className = 'details';
  details.id = 'person-details';

  // 构建详情内容（注意：实际字段名需与 JSON 一致，如 telefonnummer/email）
  const info = document.createElement('div');
  info.className = 'detail-content';
  info.innerHTML = `
    ${personData.nachname}, ${personData.vorname}
    电话：${personData.telefonnummer || '未提供'}
    邮箱：${personData.email || '未提供'}
  `;

  const closeBtn = document.createElement('button');
  closeBtn.type = 'button';
  closeBtn.className = 'close-btn';
  closeBtn.textContent = '×';
  closeBtn.addEventListener('click', () => details.remove());

  details.append(info, closeBtn);
  document.body.appendChild(details);
}

CSS 样式增强（style.css 片段）

/* 详情弹窗基础样式 */
.details {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  max-width: 90%;
  width: 400px;
  text-align: left;
}

.detail-content h2 {
  margin-top: 0;
  color: #2c3e50;
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #7f8c8d;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #ecf0f1;
  color: #e74c3c;
}

/* 列表项悬停反馈 */
.list-view .button {
  padding: 0.6rem 1rem;
  margin: 0.25rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.list-view .button:hover {
  background-color: #3498db;
  color: white;
}

⚠️ 注意事项与最佳实践

JSON 字段一致性：确保 data.json 中人员对象包含 nachname、vorname、telefonnummer、email 字段（或按实际结构调整 showDetails 中的属性访问）。
错误处理不可省略：示例中已加入 fetch 状态校验，生产环境建议补充网络异常、JSON 解析失败等兜底逻辑。
无障碍访问优化：可为
添加 role="button" 与 tabindex="0"，并监听 Enter/Space 键触发详情展示，提升键盘用户友好性。
内存与性能：关闭详情页时使用 details.remove()（现代写法）替代 parentNode.removeChild()，更简洁且自动解绑事件监听器（若无额外绑定）。
扩展性提示：如需支持“返回列表”按钮、键盘导航（←→）、或动画过渡效果，可在 .details 上添加 CSS transition 并配合 opacity/scale 控制显隐。

该方案以最小侵入性达成需求目标，代码可读性强、调试直观，是中小型静态数据展示场景的理想选择。

今天关于《JSON数据列表展示与点击展开方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！