使用jQuery实现重叠环形进度条时参数复用问题排查

我用HTML、CSS和jQuery开发重叠显示的环形进度条时遇到问题：明明为两个进度条分别配置了不同参数，它们却应用了相同的配置。以下是问题详情和解决方案：

原代码实现 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./grasp_mobile_progress_circle-1.0.0.css">
</head>
<body>
    <div class="main-container">
        <div id="outer-progress-bar">
            <div class="dashed"></div>
        </div>
        <div id="my-progress-bar"></div>
    </div>
    
</body>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="./grasp_mobile_progress_circle-1.0.0.js"></script>
<script src="./index1.js"></script>
<script src="./index2.js"></script>
</html>

CSS #

body {
}
.main-container{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
}
.outer-progress-bar{
    border-radius: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    left: -20px;
    top: -20px;
}
.dashed{
    width: 170px;
    height: 170px;
    border: 2px dashed red;
    position: absolute;
    left: 37px;
    border-radius: 50%;
}
.my-progress-bar {
    position: absolute;
    left: 0%;
    z-index: 1;
}

index1.js #

$(document).ready(function () {
    var options1 = {
        line_width: 5,
        color: "green",
        starting_position: 0,
        width: "120px",
        height: "120px",
        text: "",
        percent: 0,
    };

    var progress_circle1 = $("#my-progress-bar").gmpc(options1);
    progress_circle1.gmpc('animate', 80, 500);
});

index2.js #

var a=$(document).ready(function () {
    var options2 = {
        line_width: 12,
        color: "red",
        starting_position: 0,
        percent: 0,
        width: "300px",
        height: "300px",
        text: "",
        percentage: true,
    };
    
    var progress_circle2 = $("#outer-progress-bar").gmpc(options2);
    progress_circle2.gmpc('animate', 70, 500); 
});

效果对比 #

当前效果 #

预期效果 #

问题分析与解决方案 #

核心问题 #

1. CSS选择器错误：HTML中外层进度条用的是id="outer-progress-bar"，但CSS里写的是类选择器.outer-progress-bar，导致样式完全没生效。
2. DOM结构冲突：虚线环.dashed嵌套在#outer-progress-bar内部，插件初始化时会生成自己的DOM结构，导致虚线环位置错乱。
3. 层级与定位混乱：两个进度条的z-index和定位设置不合理，导致重叠显示不符合预期。
4. JS冗余代码：index2.js里多余的变量赋值var a=$(document).ready(...)可能引发作用域问题。

修改后的代码 #

HTML（调整DOM结构）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./grasp_mobile_progress_circle-1.0.0.css">
</head>
<body>
    <div class="main-container">
        <div id="outer-progress-bar"></div>
        <div class="dashed"></div>
        <div id="my-progress-bar"></div>
    </div>
    
</body>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="./grasp_mobile_progress_circle-1.0.0.js"></script>
<script src="./index1.js"></script>
<script src="./index2.js"></script>
</html>

CSS（修复选择器+调整层级定位）

body {
}
.main-container{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
    /* 内部元素居中对齐 */
    display: flex;
    align-items: center;
    justify-content: center;
}
#outer-progress-bar{
    border-radius: 50%;
    position: absolute;
    left: -20px;
    top: -20px;
    z-index: 0; /* 外层进度条置于底层 */
}
.dashed{
    width: 170px;
    height: 170px;
    border: 2px dashed red;
    position: absolute;
    border-radius: 50%;
    z-index: 2; /* 虚线环置于最上层 */
}
#my-progress-bar {
    position: relative;
    z-index: 1; /* 内层进度条置于中间层 */
}

index2.js（移除冗余代码）

$(document).ready(function () {
    var options2 = {
        line_width: 12,
        color: "red",
        starting_position: 0,
        percent: 0,
        width: "300px",
        height: "300px",
        text: "",
        percentage: true,
    };
    
    var progress_circle2 = $("#outer-progress-bar").gmpc(options2);
    progress_circle2.gmpc('animate', 70, 500); 
});

效果说明 #

修改后，外层红色粗进度条（300px尺寸、70%进度）会显示在底层，内层绿色细进度条（120px尺寸、80%进度）居中显示在中间，最上层是红色虚线环，完全符合预期效果。

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