如何使用Javascript（jQuery或Angular）在语义UI中启用禁用的步骤

Question

我正在用Java语言学习语义UI，并且陷入了“启用步骤”（请参见下面的代码）的问题，我有5个步骤需要启用，分别需要5秒钟才能启用。 如何使用javascript？

<div class="ui five steps">
    <div class="disabled step">
        <div class="content">
            <div class="title"> `do first step` </div>
        </div>
    </div>
    <div class="disabled step">
        <div class="content">
            <div class="title"> `do second step` </div>
        </div>
    </div>
</div>

等等

Answer 1

这是使用香草js的一种方法。

 var steps = document.querySelectorAll('.step'), total = steps.length, count = 0; var timer = setInterval(function(){ Array.prototype.forEach.call(steps, function(node, i){ if(node.classList.contains('disabled') && i === count) { node.classList.remove('disabled'); } }); if(++count >= total) clearInterval(timer); }, 1000); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> <div class="ui five steps"> <div class="disabled step"> <div class="content"> <div class="title"> `do first step` </div> </div> </div> <div class="disabled step"> <div class="content"> <div class="title"> `do second step` </div> </div> </div> <div class="disabled step"> <div class="content"> <div class="title"> `do third step` </div> </div> </div> <div class="disabled step"> <div class="content"> <div class="title"> `do fourth step` </div> </div> </div> <div class="disabled step"> <div class="content"> <div class="title"> `do fifth step` </div> </div> </div> </div>