如何用JavaScript实现点击导航栏加载对应分类的JSON数据内容

你的代码存在三个核心问题，导致无法实现预期功能：

1. 重复代码冗余：每个分类都写了几乎完全一致的导航渲染和内容渲染函数，后续新增或修改分类会非常麻烦。
2. 导航内容被覆盖：最后调用了所有displayXxx()函数，nav元素的内容会被多次覆盖，最终只保留最后一次调用的结果。
3. 未实现分类过滤：内容渲染函数没有根据传入的分类ID筛选对应items，只是单纯显示item的某个属性，达不到“点击分类加载对应内容”的效果。

下面是优化后的代码，把重复逻辑抽象成通用函数，同时修复功能问题：

// 定义分类与对应要显示的属性映射，方便扩展
const categoryPropertyMap = {
  books: 'categoryId',
  music: 'image',
  games: 'price',
  shoes: 'itemBrief',
  furniture: 'itemName'
};

// 通用导航渲染函数：接收当前要展示的属性键，生成导航按钮
function renderNavigation(targetProperty) {
  let html = '<span> Filter: </span>';
  
  categories.forEach(category => {
    // 绑定点击事件时，传入分类ID和目标属性键
    let htmlPlaceholder = `<label> 
        <input type="radio" name="category" onclick="renderItems(${category.id}, '${targetProperty}');"> 
        ${category.name} </label>`;
    html += htmlPlaceholder;
  });
  
  document.querySelector('nav').innerHTML = html;
}

// 通用内容渲染函数：根据分类ID过滤items，渲染指定属性
function renderItems(categoryId, targetProperty) {
  let html = '';
  // 过滤出当前分类下的items
  const filteredItems = items.filter(item => item.categoryId === categoryId);
  
  filteredItems.forEach(item => {
    let htmlPlaceholder = `<label> ${item[targetProperty]} </label>`;
    html += htmlPlaceholder;
  });
  
  document.querySelector('table').innerHTML = html;
}

// 初始化：比如默认展示书籍分类的导航
renderNavigation('categoryId');

优化说明： #

• 消除重复代码：通过categoryPropertyMap映射分类和要显示的属性，用两个通用函数替代之前的10个重复函数，新增分类只需要在映射表中加一行即可。
• 修复导航覆盖问题：只需要调用一次renderNavigation()初始化默认导航，不再多次覆盖nav内容。
• 实现分类过滤：在renderItems中用filter方法筛选出对应categoryId的items，真正实现点击分类加载对应内容的需求。
• 可扩展性强：后续新增分类或修改显示属性，只需修改categoryPropertyMap，无需改动核心逻辑。

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