Добавление класса в группу тегов span один за другим - PullRequest
Новая
       1

Добавление класса в группу тегов span один за другим

1 голос
/ 26 марта 2020

У меня есть html структура, подобная этой: 


<body>
    <div class="container">
        <span class="block done" id="1"></span>
        <span class="block" id="2"></span>
        <span class="block" id="3"></span>
        <span class="block" id="4"></span>
        <span class="block" id="5"></span>
    </div>
    <script src="loaders.js"></script>
</body>

Моя текущая цель состоит в том, чтобы добавить каждый класс 1s "done" (своего рода простая полоса загрузки) к промежуткам один за другим и когда последний span получил класс "done", все перезапускается и l oop снова и снова. Может кто-нибудь помочь мне, как написать это в ванили JavaScript?

1 Ответ

1 голос
/ 27 марта 2020

Вы можете сделать это так: 

var blocks = document.getElementsByClassName('block');

(function animateProgress(n) {
  for (var i = 0; i < blocks.length; i++) {
    blocks[i].classList[i < n ? 'add' : 'remove']('done');
  }
  setTimeout(function() {
    animateProgress((n + 1) % (blocks.length + 1));
  }, 400);
})(0);
.block {
  float: left;
  background: #eceded;
  padding: 1em;
  margin: 1px;
}
.block.done {
  background: #7be47b;
}
<div class="container">
  <span class="block"></span>
  <span class="block"></span>
  <span class="block"></span>
  <span class="block"></span>
  <span class="block"></span>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...