JS分类筛选时PHP Blade列表交错效果仅全部分类生效如何修复

问题根因 #

现有交错排版逻辑是服务端渲染全量博客时，按全局遍历索引的奇偶给元素加blog--left/blog--right类。当筛选特定分类后，显示的元素是全量列表里的子集，它们的原有全局奇偶索引不连续，自然就没有交错效果；同时现有代码未给博客元素绑定对应分类类名，筛选逻辑本身也无法精准匹配对应分类的博客。

修复步骤 #

1. 修改php.blade模板

补全博客元素的分类类名，同时移除服务端的交错判断逻辑，把交错逻辑交给前端动态计算：

@extends('layouts.app')

@section('content')
<div class="container">
<div class="category-filter" id="filter">
    <div class="category-filter_item active" data-filter="*">All</div>
    @foreach($categories as $category)
    <div class="category-filter_item" data-filter=".category_{{$category->id}}">{{ $category->title }}</div>
    @endforeach
</div>

@foreach ($blogs as $blog)
    <!-- 给博客元素绑定对应分类类名，支持筛选匹配 -->
    <!-- 若博客为单分类关联，直接写 category_{{$blog->category_id}} 即可 -->
    <div class="blog-list @foreach($blog->categories as $category) category_{{$category->id}} @endforeach">
        <!-- 移除服务端奇偶判断，统一结构，交错类由前端动态添加 -->
        <div class="blog">
            <h2 class="blog_title">{{ $blog->title }}</h2>
        </div>
    </div>
@endforeach
</div>
@endsection

2. 修改JavaScript逻辑

封装交错排版函数，页面首次加载和每次筛选完成后都重新计算当前可见元素的奇偶位，动态添加交错类：

// 封装交错排版逻辑
function resetBlogStagger() {
    // 仅针对当前可见的博客元素遍历
    $('.blog-list:visible .blog').each(function(index) {
        // 先清空原有左右类
        $(this).removeClass('blog--left blog--right');
        // 按当前可见列表的索引奇偶加类
        $(this).addClass(index % 2 === 1 ? 'blog--left' : 'blog--right');
    })
}

// 页面加载完成先执行一次交错
$(function() {
    resetBlogStagger();
})

// 筛选逻辑
$('.category-filter_item').click(function(){
    $('.category-filter_item').removeClass('active')
    $(this).addClass('active')
    var dataFilter = $(this).attr('data-filter');
    $('.blog-list').hide()
    $(dataFilter).show()
    // 筛选完成后重新计算交错
    resetBlogStagger();
})

3. 可选优化Controller

如果博客和分类是多对多关联，预加载分类避免模板渲染时出现N+1查询问题：

public function index()
{
    $blogs = Blog::with('categories')->get();
    $categories = Category::all();

    return view('blog', compact('blogs', 'categories'));
}

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