Laravel点击分类按钮无法展示对应数据库产品问题如何解决

问题根因 #

1. 产品DOM无分类标识：所有产品div固定使用id="test1"，既违反HTML ID唯一规范，也没有属性标记产品所属分类，JS无法识别产品对应的分类
2. 代码存在语法错误：背景图style属性的url()缺少右括号，会导致样式渲染异常
3. JS逻辑硬编码不匹配：写死了test1-test6的判断逻辑，和动态渲染的分类、产品完全不匹配，自然无法生效

修复方案 #

第一步：修改Blade产品渲染代码

给每个产品绑定所属分类属性，修正语法错误，移除重复ID：

<div id="test-area" class="activities-grid">
    @foreach ($products as $product)
    <div class="activities-grid-item" 
         data-category="{{ $product->category->name }}" 
         id="product-{{ $product->id }}"
         style="background-image: url({{asset('image')}}/{{$product->image}})">
      <h1 class="activities-h1">
        {{ $product->name }}
      </h1>
      <div class="col-md-3 col-sm-6 my-3 my-md-0">
       <div class="card-body">
            <h6 class="icons">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
            </h6>
        </div>
       </div>
      <div class="card-stuff">
          <p class="card-text">{{$product->name}}</p>
          <span class="price">{{$product->regular_price}}</span>
      </div>
    </div>
    @endforeach
</div>

注意：确保Product模型已经关联Category模型，能通过$product->category->name获取到所属分类名称，字段名不一致可对应修改

第二步：替换JS交互逻辑

删掉原有硬编码的switch逻辑，使用通用动态逻辑，后续新增分类无需修改JS：

function btnClick(btn){
  // 获取当前选中的分类名
  const activeCategory = btn.getAttribute('data-name');
  // 处理分类按钮active状态
  document.querySelectorAll('.item').forEach(item => item.classList.remove('active'));
  btn.classList.add('active');

  // 处理产品显示隐藏
  const allProducts = document.querySelectorAll('.activities-grid-item');
  // 先隐藏所有产品
  allProducts.forEach(product => product.style.display = 'none');
  // 仅显示当前分类下的产品
  document.querySelectorAll(`.activities-grid-item[data-category="${activeCategory}"]`).forEach(product => {
    product.style.display = 'flex';
  });
}

如果需要加「全部分类」功能，只需给全部分类按钮的data-name设为all，再修改JS逻辑即可：

function btnClick(btn){
  const activeCategory = btn.getAttribute('data-name');
  document.querySelectorAll('.item').forEach(item => item.classList.remove('active'));
  btn.classList.add('active');

  const allProducts = document.querySelectorAll('.activities-grid-item');
  // 全部分类逻辑
  if(activeCategory === 'all'){
    allProducts.forEach(product => product.style.display = 'flex');
    return;
  }
  allProducts.forEach(product => product.style.display = 'none');
  document.querySelectorAll(`.activities-grid-item[data-category="${activeCategory}"]`).forEach(product => {
    product.style.display = 'flex';
  });
}

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