动态生成的CSS百分比进度条仅首个正常显示问题求助

DevOps 小满

2026-7-27

问题解决：循环生成的进度条仅第一个生效

问题原因

HTML中ID必须唯一，你通过PHP循环生成的进度条都使用了同一个mySavingBar ID，而jQuery的$("#mySavingBar")只会匹配DOM中第一个该ID的元素，导致后续进度条无法被JS选中并设置宽度。

解决方案1：使用类选择器（推荐，更简洁）

步骤1：修改PHP循环中的进度条元素

将进度条的id属性改为class，保留data-width属性：

<div class="mySavingBar" data-width="<?php echo $life_ins_quiz_chapter_pct[$i];?>"></div>

步骤2：修改JS代码，遍历所有进度条

通过类选择器选中所有进度条，逐个设置宽度：

$(document).ready(function() {
    $(".mySavingBar").each(function() {
        const width = $(this).data('width');
        $(this).css("width", width + "%");
    });
});

解决方案2：使用带索引的唯一ID

如果你坚持使用ID，可以给每个进度条生成唯一ID，再遍历处理：

步骤1：修改PHP循环中的进度条ID

给ID添加循环索引后缀：

<div id="mySavingBar_<?php echo $i;?>" data-width="<?php echo $life_ins_quiz_chapter_pct[$i];?>"></div>

步骤2：修改JS代码，遍历所有带索引的ID

$(document).ready(function() {
    // 获取章节数量，和PHP循环的count对应
    const chapterCount = <?php echo count($life_ins_quiz_chapter_num);?>;
    for(let i = 0; i < chapterCount; i++){
        const barId = "#mySavingBar_" + i;
        const width = $(barId).data('width');
        $(barId).css("width", width + "%");
    }
});