Laravel中动态为课程进度条活跃天数HTML元素添加CSS类

嘿，这事儿不难，我来给你捋捋怎么实现这个动态进度条的需求！核心就是根据用户当前的学习进度，给对应的学习日元素自动加上active类，同时处理好锁定图标和测试小圆圈的状态。

第一步：后端准备数据传递 #

首先在控制器里，把课程总天数和用户当前的学习进度天数传到Blade模板里。假设你已经有用户课程进度的关联模型，代码大概是这样：

public function showCourse(Course $course)
{
    // 获取当前用户的学习进度，没有进度默认设为0
    $userProgress = auth()->user()->courseProgress()->where('course_id', $course->id)->first();
    $currentDay = $userProgress ? $userProgress->current_day : 0;
    $totalDays = $course->total_days; // 课程总天数，比如14或20

    return view('courses.detail', compact('course', 'currentDay', 'totalDays'));
}

第二步：Blade模板动态生成进度条 #

接下来在模板里循环生成每个学习日和对应的测试小圆圈，同时判断是否要添加active类：

<div class="progress-container d-flex align-items-center">
    @for ($day = 1; $day <= $totalDays; $day++)
        <!-- 学习日大圆圈 -->
        <div class="day-circle 
            {{ $day == $currentDay ? 'active' : '' }}
            {{ $day < $currentDay ? 'completed' : '' }}">
            
            @if ($day > $currentDay)
                <!-- 锁定图标，用你项目里的图标就行，比如Font Awesome -->
                <i class="fa-solid fa-lock"></i>
            @else
                <span>Day {{ $day }}</span>
            @endif
        </div>

        <!-- 测试小圆圈：最后一个学习日后面不用加 -->
        @if ($day < $totalDays)
            <div class="quiz-circle {{ $day < $currentDay ? 'completed' : '' }}">
                <i class="fa-solid fa-check"></i>
            </div>
        @endif
    @endfor
</div>

第三步：给状态类加样式 #

最后用CSS区分不同状态的视觉效果，让进度条更直观：

.progress-container {
    gap: 1.2rem;
    padding: 2rem;
}

.day-circle {
    width: 55px;
    height: 55px;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* 当前活跃的学习日样式 */
.day-circle.active {
    border-color: #3b82f6;
    background-color: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
}

/* 已完成的学习日样式 */
.day-circle.completed {
    border-color: #10b981;
    background-color: #d1fae5;
    color: #059669;
}

.quiz-circle {
    width: 28px;
    height: 28px;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* 已完成的测试样式 */
.quiz-circle.completed {
    border-color: #10b981;
    background-color: #10b981;
    color: white;
}

额外小提示 #

• 如果你的课程逻辑是必须完成测试才能进入下一天，可以调整currentDay的更新规则，比如只有用户提交测试后再递增天数。
• 要是有些学习日没有测试环节，可以在课程模型里加个has_quiz字段，循环时判断是否显示测试小圆圈。

这样就能完美实现动态给当前活跃天数添加active类的效果啦！

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