点击列表项展示对应JSON数据集信息的实现需求

没问题，我来帮你搞定这个需求！下面是完整的实现代码，分HTML结构和JavaScript逻辑两部分，你可以直接复用：

1. HTML基础结构 #

先准备好列表容器和详情展示区域：

<!-- 设施列表容器 -->
<ul id="facilityList" style="cursor: pointer; list-style-type: none; padding-left: 0;"></ul>

<!-- 详情展示区域 -->
<div id="facilityDetail" style="margin-top: 20px; padding: 10px; border: 1px solid #eee; border-radius: 4px;">
  <h3>设施详情</h3>
  <pre id="detailContent">请点击一个设施查看详情</pre>
</div>

我给元素加了点基础样式，你可以根据自己的页面风格调整或者去掉。

2. JavaScript逻辑实现 #

接下来处理数据循环和点击事件：

var facilityDetails = [
  {
    "level": 1,
    "LocationId": 1,
    "LocationName": "This is an example of a multi-line ellipsis.This is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsis",
    "ParentLocationId": 0,
    "description": "Test Facility",
  },
  {
    "level": 1,
    "LocationId": 2,
    "LocationName": "Facility 2",
    "ParentLocationId": 0,
    "description": "Test Facility",
  },
  {
    "level": 1,
    "LocationId": 3,
    "LocationName": "Facility 3",
    "ParentLocationId": 0,
    "description": "Test Facility",
  },
  {
    "level": 1,
    "LocationId": 4,
    "LocationName": "Facility 4",
    "ParentLocationId": 0,
    "description": "Test Facility",
  },
  {
    "level": 1,
    "LocationId": 5,
    "LocationName": "Facility 5",
    "ParentLocationId": 0,
    "description": "Test Facility",
  }
];

// 获取页面元素
const facilityList = document.getElementById('facilityList');
const detailContent = document.getElementById('detailContent');

// 循环生成列表项
facilityDetails.forEach(facility => {
  const listItem = document.createElement('li');
  
  // 处理过长的设施名称（可选，避免列表撑得太宽）
  const displayName = facility.LocationName.length > 60 
    ? `${facility.LocationName.slice(0, 60)}...` 
    : facility.LocationName;
  
  listItem.textContent = displayName;
  // 给列表项加点击事件，点击时展示对应详情
  listItem.addEventListener('click', () => {
    // 组装详情内容，你可以自定义格式
    const detailText = `
设施ID: ${facility.LocationId}
设施名称: ${facility.LocationName}
层级: ${facility.level}
父级ID: ${facility.ParentLocationId}
描述: ${facility.description}
    `;
    detailContent.textContent = detailText.trim();
  });
  
  // 给列表项加hover效果（可选）
  listItem.style.padding = '8px 12px';
  listItem.style.borderBottom = '1px solid #f0f0f0';
  listItem.addEventListener('mouseover', () => {
    listItem.style.backgroundColor = '#f5f5f5';
  });
  listItem.addEventListener('mouseout', () => {
    listItem.style.backgroundColor = 'transparent';
  });
  
  facilityList.appendChild(listItem);
});

额外说明 #

• 我给过长的LocationName做了截断处理，你可以调整截断长度或者直接去掉这个逻辑；
• 详情区域用了<pre>标签，能保留换行格式，让内容更清晰，你也可以换成<div>用HTML标签排版；
• 加了简单的hover和点击反馈样式，提升用户体验，你可以根据需求修改样式。

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