选择分类时调用Ajax解决博客列表奇偶交替布局失效问题

问题根源 #

你当前的奇偶样式是服务端渲染全量博客时，根据全局循环下标赋值的。筛选分类时仅隐藏了不符合条件的DOM元素，可见元素的blog--left/blog--right类还是全局下标对应的取值，自然不会按筛选后的列表重新交替。
以下是Ajax实现方案的完整改造步骤： #

第一步：新增路由（routes/web.php） #

新增分类筛选的专属路由：

Route::get('/blogs/filter', [BlogController::class, 'filter'])->name('blogs.filter');

第二步：修改控制器 #

新增filter方法处理Ajax请求，同时修正原代码里Category:all()缺冒号的笔误：

use Illuminate\Http\Request;

public function index()
{
    $blogs = Blog::all();
    $categories = Category::all();
    return view('blog', compact('blogs', 'categories'));
}

public function filter(Request $request)
{
    $request->validate([
        'category_id' => 'nullable|integer|exists:categories,id'
    ]);
    // 分类ID为空时返回全量博客，否则返回对应分类的博客
    $blogs = $request->category_id ? Blog::where('category_id', $request->category_id)->get() : Blog::all();
    // 返回渲染后的博客列表片段
    return view('partials.blog-list', compact('blogs'))->render();
}

第三步：拆分Blade模板 #

新建子视图resources/views/partials/blog-list.blade.php，把原有的博客列表循环逻辑移到这里：

@foreach ($blogs as $index => $blog)
<div class="blog-list">
    @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

修改原页面的Blade文件，给分类按钮加分类ID属性，同时新增博客列表容器用来动态替换内容：

@extends('layouts.app')

@section('content')
<div class="container">
<div class="category-filter" id="filter">
    <div class="category-filter_item active" data-category-id="">全部</div>
    @foreach($categories as $category)
    <div class="category-filter_item" data-category-id="{{ $category->id }}">{{ $category->title }}</div>
    @endforeach
</div>
<!-- 动态列表容器 -->
<div id="blog-container">
    @include('partials.blog-list')
</div>
</div>
@endsection

第四步：替换JavaScript逻辑 #

把原来的隐藏/显示逻辑替换为Ajax请求：

$('.category-filter_item').click(function(){
    $('.category-filter_item').removeClass('active')
    $(this).addClass('active')
    const categoryId = $(this).data('category-id');
    $.get('/blogs/filter', {category_id: categoryId}, function(res) {
        $('#blog-container').html(res);
    })
})

如果JS代码写在Blade文件内，也可以用路由别名生成请求地址：$.get('{{ route('blogs.filter') }}', ...)

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