我为进度条编写了代码，以在单击特定里程碑时动态增加。
当我单击里程碑时，我希望颜色保持红色，但不能为每个div添加onclick方法。
我已经更新了代码，我已经在行中插入了列，以便我希望将进度条保留在第一列中，但是这些点已经溢出了。有谁可以帮忙吗？
var mileStones = Array.from(document.querySelectorAll('.primary-color'));
mileStones.forEach(elem => {
elem.onclick = function() {
const current = this;
let flag = false;
document.getElementById('pp').style.width = current.dataset.width + '%';
mileStones.forEach(elem => {
elem.classList.add('active');
if (flag) elem.classList.remove('active');
if (current.id === elem.id) flag = true;
});
}
});.progress {
width: 100%;
height: 6px;
margin-top: 50px;
}
.progress-bar {
width: 50%;
background-color: #00A2DB;
}
#one,
#two,
#three,
#four,
#five {
position: absolute;
margin-top: -8px;
z-index: 1;
height: 20px;
width: 20px;
border-radius: 25px;
}
#one,
.percent {
left: 0%;
}
#two,
.percent1 {
left: 25%;
}
#three,
.percent2 {
left: 50%;
}
#four,
.percent3 {
left: 75%;
}
#five,
.percent4 {
left: 100%;
}
.primary-color {
background-color: pink;
}
.primary-color:active {
background-color: red;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<div class="row">
<div class="col-9">
<p>Business case completion:</p>
<div class="progress" id="progress">
<div class="primary-color" id="one" data-width="0"></div>
<div class="primary-color" id="two" data-width="25"></div>
<div class="primary-color" id="three" data-width="50"></div>
<div class="primary-color" id="four" data-width="75"></div>
<div class="primary-color" id="five" data-width="100"></div>
<div class="progress-bar" id="pp" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" onclick="progressBarTest()"></div>
</div>
</div>
<div class="col-3 align-self-end">
<p class="primary1"> ID 453</p>
</div>
</div>最佳答案
您可以创建一个通用方法来为每一个里程数设置onclick，并且可以使用“活动”类来维持活动样式，还可以受益于数据属性以使函数动态化。
版
要保留被单击之前的里程碑，可以使用标志。为了做到这一点。
var mileStones = Array.from(document.querySelectorAll('.primary-color'));
mileStones.forEach(elem => {
elem.onclick = function() {
const current = this;
let flag = false;
document.getElementById('pp').style.width = current.dataset.width+'%';
mileStones.forEach(elem =>{
elem.classList.add('active');
if(flag) elem.classList.remove('active');
if(current.id === elem.id) flag = true;
});
}
});.progress {
width: 100%;
height: 6px;
}
.progress-bar {
width: 50%;
background-color: #00A2DB;
}
#one,
#two,
#three,
#four,
#five {
position: absolute;
margin-top: -8px;
z-index: 1;
height: 20px;
width: 20px;
border-radius: 25px;
}
#one {
left: 0%;
}
#two {
left: 25%;
}
#three {
left: 50%;
}
#four {
left: 75%;
}
#five {
left: 100%;
}
.primary-color {
background-color: pink;
}
.primary-color:active, .active {
background-color: red;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<div class="progress">
<div class="primary-color" id="one" data-width="0"></div>
<div class="two primary-color" id="two" data-width="25"></div>
<div class="three primary-color" id="three" data-width="50"></div>
<div class="four primary-color" id="four" data-width="75"></div>
<div class="five primary-color" id="five" data-width="100"></div>
<div class="progress-bar" id="pp" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" onclick="progressBarTest()"></div>
</div>