使所有選定的 css 圓圈處於活動狀態

Question

我正在嘗試創建一個 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錯誤。

對此的任何幫助將不勝感激。

Answer 1

每次點擊一個圓圈時，獲取它的數據 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>

Answer 2

不以此為榮

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');
  });
}

更新：切換到更清潔的 classList 作為其他答案