Javascript 进度条作为里程碑

我已经为进度条编写了代码，以便在单击特定里程碑时动态增加进度条

当我单击一个里程碑时，我希望颜色保持红色，但我不能将

onclick

方法添加到每个div

---

我已经更新了代码，我已经在一行中插入了列，所以我想让进度条保持在第一列中，但这些点已经溢出。有人能帮忙吗

var里程碑=Array.from（document.querySelectorAll（'.primary color'）；
里程碑。forEach（elem=>{
elem.onclick=函数（）{
恒流=此；
让flag=false；
document.getElementById（'pp'）。style.width=current.dataset.width+'%'；
里程碑。forEach（elem=>{
元素classList.add（'active'）；
if（标志）elem.classList.remove（'active'）；
如果（current.id==elem.id）标志=true；
});
}
});
。进度{
宽度：100%；
高度：6px；
边缘顶部：50px；
}
.进度条{
宽度：50%；
背景色：#00A2DB；
}
#一,，
#二,，
#三,，
#四,，
#五{
位置：绝对位置；
利润上限：-8px；
z指数：1；
高度：20px；
宽度：20px；
边界半径：25px；
}
#一,，
{
左：0%；
}
#二,，
.1%1{
左：25%；
}
#三,，
.2%{
左：50%；
}
#四,，
.3%{
左：75%；
}
#五,，
.4%{
左：100%；
}
.原色{
背景颜色：粉红色；
}
.原色：激活{
背景色：红色；
}

商业案例完成：

ID 453

您可以创建一个通用方法来为每英里石头设置onclick，并且您可以使用“active”类来维护活动样式，您还可以从数据属性中获益，以使函数动态

版本
要保留在单击里程碑之前的里程碑，可以使用标志。为了实现这一点


var里程碑=Array.from（document.querySelectorAll（'.primary color'）；
里程碑。forEach（elem=>{
elem.onclick=函数（）{
恒流=此；
让flag=false；
document.getElementById（'pp'）.style.width=current.dataset.width+'%'；
里程碑。forEach（elem=>{
元素classList.add（'active'）；
if（标志）elem.classList.remove（'active'）；
如果（current.id==elem.id）标志=true；
}); 
}
});
。进度{
宽度：100%；
高度：6px；
}
.进度条{
宽度：50%；
背景色：#00A2DB；
}
#一,，
#二,，
#三,，
#四,，
#五{
位置：绝对位置；
利润上限：-8px；
z指数：1；
高度：20px；
宽度：20px；
边界半径：25px；
}
#一个{
左：0%；
}
#两个{
左：25%；
}
#三{
左：50%；
}
#四{
左：75%；
}
#五{
左：100%；
}
.原色{
背景颜色：粉红色；
}
.原色：活动，.活动{
背景色：红色；
}
您可以创建一个通用方法来为每英里石头设置onclick，并且您可以使用“active”类来维护活动样式，您还可以从数据属性中获益，以使函数动态

版本
要保留在单击里程碑之前的里程碑，可以使用标志。为了实现这一点


var里程碑=Array.from（document.querySelectorAll（'.primary color'）；
里程碑。forEach（elem=>{
elem.onclick=函数（）{
恒流=此；
让flag=false；
document.getElementById（'pp'）.style.width=current.dataset.width+'%'；
里程碑。forEach（elem=>{
元素classList.add（'active'）；
if（标志）elem.classList.remove（'active'）；
如果（current.id==elem.id）标志=true；
}); 
}
});
。进度{
宽度：100%；
高度：6px；
}
.进度条{
宽度：50%；
背景色：#00A2DB；
}
#一,，
#二,，
#三,，
#四,，
#五{
位置：绝对位置；
利润上限：-8px；
z指数：1；
高度：20px；
宽度：20px；
边界半径：25px；
}
#一个{
左：0%；
}
#两个{
左：25%；
}
#三{
左：50%；
}
#四{
左：75%；
}
#五{
左：100%；
}
.原色{
背景颜色：粉红色；
}
.原色：活动，.活动{
背景色：红色；
}

只需在进度条本身中侦听单击事件（
#progress_ubase
在下面的示例中）

然后，您可以检查以了解单击了哪个元素及其索引，并使用该索引计算新的进度百分比，并将
.active
类添加或删除到单击之前或之后的所有里程碑

事实上，如果您在CSS中使用，您可以大大简化代码，并使其与任意数量的里程碑一起工作，而无需更改任何CSS或JavaScript代码，只需在HTML中添加或多或少的CSS或JavaScript代码即可：


const progressBase=document.getElementById（'progress_uu________________________；
const progressBar=document.getElementById（'progress____-bar'）；
const progressPoints=Array.from（progressBase.children）.slice（1）；
progressBase.onclick=函数（e）{
const target=e.target；
如果（！target.classList.contains（'progress\u bullet'））{
//忽略对#进度(基础和#进度)栏的单击
返回；
}
const index=progressPoints.indexOf（目标）；
progressBar.style.width=`${100*索引/（progressPoints.length-1）}%`；
//将活动类添加到
//单击一个，然后单击一个本身：
对于（让i=0；i只需在进度条本身中侦听单击事件（
#progress_u_ubase
，在下面的示例中）

然后，您可以检查以了解单击了哪个元素及其索引，并使用该索引计算新的进度百分比，并将
.active
类添加或删除到单击之前或之后的所有里程碑

事实上，如果你在CSS中使用，你可以大大简化你的代码，让它在任何情况下都能正常工作