我正在嘗試創建一個 css 圓圈的進度條，其中單擊每個圓圈（如 1、2、3）后，所有三個圓圈及其連接線將被紅色填充，如果返回如 3、2、1 那么應去除顏色。HTML：<div class="row well" id="rows"> <ul id="progressbar" class="progressbar"> <li class="cir danger">THOUGHFUL</li> <li class="cir">PASSION</li> <li class="cir">POWER OF DESIGN</li> <li class="cir">BUILDING RELATIONSHIPS</li> <li class="cir">ENHANCE HUMAN INTERATION</li> </ul> </div>JS：var header = document.getElementById("rows"); var bar = document.getElementsByClassName("progressbar"); var btns = header.getElementsByClassName("cir"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function () { var danger = document.getElementsByClassName("danger"); danger[0].className = danger[0].className.replace("danger", ""); this.className += " danger"; }); }示例圖片：參考上面的圖片，如果我點擊圓圈 3，那么圓圈 1,2,3 應該是紅色，然后如果我點擊圓圈 2，那么圓圈 3 應該是白色，1 和 2 應該是紅色，反之亦然。我嘗試用JS實現，但是classnotfound報錯。對此的任何幫助將不勝感激。
2 回答
慕運維8079593
TA貢獻1876條經驗 獲得超5個贊
每次單擊一個圓圈時，獲取其數據 ID 并激活具有相同或較小數據 ID 的所有圓圈。
let circles = document.querySelectorAll(".circle")
circles.forEach(el => {
el.addEventListener("click", (e) => {
let id = e.target.dataset.id
circles.forEach(el2 => {
if(el2.dataset.id <= id){
el2.classList.add("active")
}else{
el2.classList.remove("active")
}
})
})
})
.circled{display:flex}
.circle{
border-radius:50%;
width:50px;
height:50px;
border: solid 2px #333;
display:inline-flex;
align-items:center;
justify-content:center;
position:relative;
margin-left: 44px;
cursor:pointer;
}
.circle:not(:first-of-type)::before{
height: 2px;
width: 50px;
content:"";
background-color: #333;
position:absolute;
left:-50px;
}
.circle.active{
border-color: #f00;
}
.circle.active:not(:first-of-type)::before{
background-color: #f00;
}
<div class="circles">
<div class="circle active" data-id="1">1</div>
<div class="circle" data-id="2">2</div>
<div class="circle" data-id="3">3</div>
<div class="circle" data-id="4">4</div>
<div class="circle" data-id="5">5</div>
</div>
慕桂英4014372
TA貢獻1871條經驗 獲得超13個贊
并不以此為榮
var header = document.getElementById("rows");
var bar = document.getElementsByClassName("progressbar");
var btns = header.getElementsByClassName("cir");
Array.prototype.forEach.call(btns,function(btn){
btn.addEventListener('click', function(e){
updateProgress(btn,e)
})
});
function updateProgress(btn,e){
removeDangerFromAll();
for( let btnToCheck of btns){
btnToCheck.classList.add('danger');
if (btnToCheck == btn) {
break;
}
}
}
function removeDangerFromAll(){
Array.prototype.forEach.call(btns,function(btn){
btn.classList.remove('danger');
});
}
更新：切換到更干凈的類列表作為其他答案
- 2 回答
- 0 關注
- 116 瀏覽
添加回答
舉報
0/150
提交
取消