如何实现用户点击菜单时展示对应匹配的菜单详情？

核心实现逻辑 #

要实现点击菜单展示对应详情，核心是通过菜单ID关联列表与详情接口，分三步执行：

• 渲染菜单列表，为每个菜单项绑定点击事件并传递其ID
• 点击触发时，调用详情API传入该ID
• 将返回的详情数据渲染到页面指定区域

参考资源说明 #

• 菜单模型（Menu Model）：定义菜单基础数据结构
• 菜单详情模型（Menu Detail Model）：定义菜单详情的完整数据结构
• 菜单服务（Menu Service）：获取菜单列表的服务逻辑
• 菜单详情服务（Menu Detail Service）：根据ID获取菜单详情的服务逻辑
• 菜单/产品卡片（Menu or Product Card）：菜单列表的UI组件

代码示例（原生JS） #

// 渲染菜单列表
async function renderMenus() {
  const menus = await MenuService.getMenus();
  const menuContainer = document.getElementById('menu-list');
  
  menus.forEach(menu => {
    const card = document.createElement('div');
    card.classList.add('menu-card');
    card.innerHTML = `<h4>${menu.name}</h4>`;
    // 点击时触发详情获取
    card.onclick = () => loadMenuDetail(menu.id);
    menuContainer.appendChild(card);
  });
}

// 获取并展示菜单详情
async function loadMenuDetail(menuId) {
  try {
    const detail = await MenuDetailService.getDetailById(menuId);
    const detailArea = document.getElementById('menu-detail');
    // 按详情模型字段渲染内容
    detailArea.innerHTML = `
      <h3>${detail.name}</h3>
      <p>${detail.description}</p>
      <span>价格：${detail.price}元</span>
      <!-- 其他字段根据实际模型补充 -->
    `;
  } catch (err) {
    console.error('加载详情失败:', err);
  }
}

// 页面初始化加载菜单列表
window.onload = renderMenus;

常见问题排查 #

• 检查ID传递是否正确：点击菜单时打印menuId，确认与接口要求的ID格式、值一致
• 验证详情API请求：在浏览器控制台查看网络请求，确认请求地址、参数正确，返回数据正常
• 确认DOM元素存在：检查menu-list和menu-detail两个容器是否在页面中正确定义
• 匹配模型字段：确保渲染时使用的字段与Menu Detail Model返回的字段完全对应

内容的提问来源于stack exchange，提问作者Avief Akbarsyah Putra