动态餐厅菜单：如何传递分类ID匹配对应分类餐品

你之前遇到的重复渲染、jQuery无法适配动态内容的问题，核心来自三个点：一是HTML本身存在标签嵌套错误、语法缺失问题，导致DOM解析异常；二是嵌套循环时没有对餐品做分类过滤，直接全量遍历餐品才会出现分类数乘餐品数的重复输出；三是元素没有绑定统一的关联标识，交互逻辑找不到对应动态渲染的内容。

第一步：先修复基础结构问题 #

你现有代码嵌套了两套<html>/<head>/<body>标签，还存在script标签缺引号、button标签未闭合的语法错误，这类问题会直接导致脚本运行失效，首先要把冗余的重复标签、语法错误全部删掉。

第二步：调整模板渲染逻辑 #

要保证餐品和分类能正确匹配，首先要确认数据层的关联：你的餐品表需要带对应分类的唯一标识（比如category_id字段），控制器查询时可以直接用模型关联取数，也可以在模板层对餐品集合做筛选。
渲染时给分类按钮、餐品容器都加上对应的分类标识属性，不要直接用分类名当元素id，避免特殊字符、分类重名导致的匹配错误。修正后的Blade模板代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>餐厅菜单</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- 分类选择区 -->
  @foreach($category as $c)
  <div class="menuSelector">
    <button class="selection" data-category-id="{{ $c->id }}">
      <p>{{ $c->name }}</p>
    </button>
  </div>
  @endforeach

  <div class="theMenu">
    <br><br><br>
    <div class="appSides">
      {{-- 按分类渲染对应餐品容器，默认全部隐藏 --}}
      @foreach($category as $c)
      <div class="column menu-column" data-category-id="{{ $c->id }}" style="display: none;">
        @php
          // 如果控制器已经做了餐品模型关联，直接用$c->meals取当前分类下的餐品即可，不需要这行筛选
          $categoryMeals = $meal->where('category_id', $c->id);
        @endphp
        @foreach($categoryMeals as $m)
        <div class="menuItem">
          <p class="itemName">{{$m->name}}</p>
          <div class="menuItemPrice">¥{{$m->price}}</div>
        </div>
        @endforeach
      </div>
      @endforeach
    </div>
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script src="./script.js"></script>
</body>
</html>

第三步：实现分类切换交互 #

因为内容是服务端直出的，不需要复杂的事件委托，只要等DOM加载完成后绑定点击事件即可，把下面的代码放到script.js文件中：

$(function() {
  // 页面加载默认展示第一个分类的餐品，给第一个按钮加激活样式
  $('.menu-column').first().show();
  $('.selection').first().addClass('active');

  // 分类切换逻辑
  $('.selection').click(function() {
    const targetCategoryId = $(this).data('category-id');
    // 切换按钮激活状态
    $('.selection').removeClass('active');
    $(this).addClass('active');
    // 切换餐品显示：隐藏全部分类餐品，只展示当前选中分类的内容
    $('.menu-column').hide();
    $(`.menu-column[data-category-id="${targetCategoryId}"]`).show();
  })
})

你可以自行在CSS中给.selection.active加高亮样式，方便用户识别当前选中的分类。如果后续餐品量级变大，不想首屏加载全量数据，把点击事件里的展示逻辑改成AJAX拉取对应分类餐品再渲染即可，当前方案对于普通餐厅菜单的 data 量级完全够用，不会有性能问题。

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