将类逐个添加到 span 标签组中

Question

我得到了这样的 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 类“完成”（它的某种简单的加载栏）一个一个地添加到跨度中，当最后一个跨度“完成”类时，一切都会重新启动并一遍又一遍地循环。 有人可以帮助我如何用 vanilla JavaScript 编写这个吗？

Answer 1

你可以这样做：

 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>

将类逐个添加到 span 标签组中

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-26 21:00:24

将类逐个添加到 span 标签组中

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-26 21:00:24

解决方案1
1 已采纳 2020-03-26 21:00:24