Я пытаюсь создать индикатор выполнения кругов 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.

Любая помощь для этого будет оценена.

1
Prathamesh Doke 29 Мар 2020 в 00:13

2 ответа

Лучший ответ

Каждый раз при щелчке по кругу захватывайте его идентификатор данных и активируйте все круги с одинаковым или меньшим идентификатором данных.

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>
2
symlink 28 Мар 2020 в 22:41

Не горжусь этим

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 как другой ответ

1
Shaun Forsyth 28 Мар 2020 в 22:27