JS分类筛选时Blade模板博客列表交替布局失效如何解决？

问题根源 #

1. 基础筛选逻辑缺失：博客列表项未绑定对应分类的类名，导致筛选逻辑无法准确定位对应分类的内容
2. 交替布局逻辑不合理：原有的blog--left/right类是按全量博客的全局索引生成的，筛选特定分类后，可见内容保留了原全局索引的奇偶标记，没有按当前可见列表的顺序重新计算，因此布局错乱
3. 控制器代码存在语法笔误：Category:all() 应为 Category::all()（缺少1个冒号）

修复步骤 #

1. 补全分类筛选基础逻辑

修改php.blade中博客列表项的代码，为每个项加上对应分类的类名（假设博客表关联分类的字段为category_id，可根据实际字段名调整）：

@foreach ($blogs as $index => $blog)
    <div class="blog-list category_{{$blog->category_id}}">
        @if ($index % 2 === 1)
            <div class="blog blog--left" >
                <h2 class="blog_title">{{ $blog->title }}</h2>
            </div>
        @else
            <div class="blog blog--right">
                <h2 class="blog_title">{{ $blog->title }}</h2>
            </div>
        @endif
    </div>
@endforeach

2. 修复交替布局逻辑（推荐前端动态计算方案，无需修改原有交互逻辑）

第一步：修改blade模板，移除后端奇偶判断逻辑，统一输出基础结构

@foreach ($blogs as $index => $blog)
    <div class="blog-list category_{{$blog->category_id}}">
        <div class="blog">
            <h2 class="blog_title">{{ $blog->title }}</h2>
        </div>
    </div>
@endforeach

第二步：修改JS代码，新增布局重置函数，每次筛选后重新计算奇偶布局

// 重置交替布局函数
function resetAlternateLayout() {
    // 仅遍历当前可见的博客项
    $('.blog-list:visible .blog').each(function(idx) {
        $(this).removeClass('blog--left blog--right');
        $(this).addClass(idx % 2 === 1 ? 'blog--left' : 'blog--right');
    })
}

// 页面首次加载时初始化布局
$(document).ready(function() {
    resetAlternateLayout();
})

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

3. 修复控制器语法错误

public function index()
{
    $blogs = Blog::all();
    $categories = Category::all(); // 补全第二个冒号

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

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