餐厅菜单网站分类按钮点击无法动态加载菜品卡片问题排查

问题概述 #

开发餐厅菜单网站时，点击导航栏分类按钮（如starters、beverages等）无法动态加载对应分类的菜品卡片，已实现displaymenuItems渲染函数但功能异常。

核心错误点 #

• 自动分号插入导致渲染失败：displaymenuItems函数中return语句后直接换行，JavaScript会自动在return后添加分号，导致模板字符串无法被返回，最终渲染空内容。
• filter方法中使用赋值而非比较：分类筛选时用update.category = foods（赋值操作）替代update.category === foods（比较操作），不仅无法正确筛选，还会修改原menu数组的category值，污染原始数据。
• window.load事件变量未定义：window.addEventListener("load")中调用displaymenuItems(menuItems)，但menuItems未声明，应改为menu。
• 部分菜品缺少img属性：渲染时会出现src="undefined"，导致图片加载错误，需添加默认图片处理。

修正后的完整代码 #

const menu = [
    { id: 1, title: "当日例汤", category: "starters", price: "$5", description: "时令食材现做鲜蔬汤", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 2, title: "意式烤面包", category: "starters", price: "$7", description: "蒜香烤面包配番茄丁、新鲜罗勒和马苏里拉奶酪", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 3, title: "帕尔马干酪鸡排", category: "mains", price: "$12", description: "酥脆鸡排配番茄酱和马苏里拉奶酪，搭配意大利面", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 4, title: "牛排配薯条", category: "mains", price: "$18", description: "烤牛排配法式薯条和沙拉", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" }, 
    { id: 5, title: "熔岩巧克力蛋糕", category: "desserts", price: "$8", description: "温热巧克力蛋糕，内流心巧克力，搭配香草冰淇淋", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 6, title: "经典苹果派", category: "desserts", price: "$6", description: "酥皮苹果派，搭配鲜奶油", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 7, title: "素食汉堡", category: "mains", price: "$10", description: "植物基汉堡配薯条", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 8, title: "凯撒沙拉", category: "starters", price: "$6", description: "罗马生菜配凯撒酱、帕尔马干酪和面包丁", img: "https://images.unsplash.com/photo-1550304943-4f24f54ddde9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2Vhc2FyJTIwc2FsYWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" },
    { id: 9, title: "培根蛋意面", category: "mains", price: "$14", description: "经典卡邦尼意面，配培根、鸡蛋、硬质奶酪和黑胡椒", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 10, title: "提拉米苏", category: "desserts", price: "$7", description: "意式甜点，手指饼干浸咖啡，搭配鸡蛋、糖和马斯卡彭奶酪的奶油层", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 11, title: "冰咖啡", category: "beverages", price: "$4", description: "冰镇咖啡配冰和奶油", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 12, title: "芒果拉西", category: "beverages", price: "$5", description: "印度清爽饮品，芒果配酸奶", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
    { id: 13, title: "绿茶", category: "beverages", price: "$3", description: "传统抗氧化绿茶", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60" },
];

const categoryButtons = $(".nav-link");
const menuContainer = $(".rows");

// 修复window.load事件的变量错误
window.addEventListener("load", function(){
  displaymenuItems(menu);
});

function displaymenuItems(menuItems){
  // 修复return换行问题，将模板字符串与return放在同一行
  let displaymenu = menuItems.map((item) =>{
    // 处理图片缺失问题，添加默认图片
    const itemImg = item.img || "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&q=60";
    return `<div class="menu-item col-12 col-md-6 col-lg-4">
        <div class="card">
          <img src="${itemImg}" class="card-img-top" alt="${item.title}">
          <div class="card-body">
            <h5 class="card-title">${item.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">${item.price}</h6>
            <p class="card-text">${item.description}</p>
            <p class="card-text"><small class="text-muted">分类: ${item.category}</small></p>
          </div>
        </div>
      </div>`;
  });

  displaymenu = displaymenu.join("");
  menuContainer.html(displaymenu);
}

$(document).ready(function(){
  displaymenuItems(menu);
});

categoryButtons.click(function(){
  const foods = $(this).attr("data-category");

  if(foods === "all"){
      displaymenuItems(menu);
  } else {
       // 修复filter中的比较操作，用===替代=
       const updated = menu.filter((item) => item.category === foods);
       displaymenuItems(updated);
  }
})

修复说明 #

1. 解决自动分号插入问题：将return与模板字符串放在同一行，确保返回正确的HTML片段。
2. 修正filter逻辑：使用item.category === foods进行严格比较，避免修改原数组，实现正确的分类筛选。
3. 修复未定义变量：将window.load中的menuItems改为menu，确保页面加载时能正确渲染全部菜品。
4. 处理图片缺失：添加默认图片地址，避免因部分菜品无img属性导致的加载错误。

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