使所有选定的 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 => {&nbsp; &nbsp;el.addEventListener("click", (e) => {&nbsp; &nbsp; &nbsp;let id = e.target.dataset.id&nbsp; &nbsp; &nbsp;circles.forEach(el2 => {&nbsp; &nbsp; &nbsp; &nbsp; if(el2.dataset.id <= id){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el2.classList.add("active")&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el2.classList.remove("active")&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;})&nbsp; &nbsp;&nbsp; &nbsp;})}).circled{display:flex}.circle{&nbsp; &nbsp;border-radius:50%;&nbsp; &nbsp;width:50px;&nbsp; &nbsp;height:50px;&nbsp; &nbsp;border: solid 2px #333;&nbsp; &nbsp;display:inline-flex;&nbsp; &nbsp;align-items:center;&nbsp; &nbsp;justify-content:center;&nbsp; &nbsp;position:relative;&nbsp; &nbsp;margin-left: 44px;&nbsp; &nbsp;cursor:pointer;}.circle:not(:first-of-type)::before{&nbsp; &nbsp;height: 2px;&nbsp; &nbsp;width: 50px;&nbsp; &nbsp;content:"";&nbsp; &nbsp;background-color: #333;&nbsp; &nbsp;position:absolute;&nbsp; &nbsp;left:-50px;}.circle.active{&nbsp; &nbsp;border-color: #f00;}.circle.active:not(:first-of-type)::before{&nbsp; &nbsp;background-color: #f00;}<div class="circles">&nbsp; &nbsp;<div class="circle active" data-id="1">1</div>&nbsp; &nbsp;<div class="circle" data-id="2">2</div>&nbsp; &nbsp;<div class="circle" data-id="3">3</div>&nbsp; &nbsp;<div class="circle" data-id="4">4</div>&nbsp; &nbsp;<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){&nbsp; &nbsp; btn.addEventListener('click', function(e){&nbsp; &nbsp; updateProgress(btn,e)&nbsp; })});function updateProgress(btn,e){&nbsp; &nbsp; removeDangerFromAll();&nbsp; for( let btnToCheck of btns){&nbsp; &nbsp; btnToCheck.classList.add('danger');&nbsp; &nbsp; if (btnToCheck == btn) {&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; }}function removeDangerFromAll(){&nbsp; &nbsp; Array.prototype.forEach.call(btns,function(btn){&nbsp; &nbsp; btn.classList.remove('danger');&nbsp; });}更新：切换到更干净的类列表作为其他答案