將類逐個添加到 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