So aktivieren Sie einen deaktivierten Schritt in Semantic UI mit Javascript (jQuery oder Angular)

Question

Ich lerne Semantic UI mit Javascript und ich blieb bei der "Schritt aktivieren" (siehe Code unten) Ich habe 5 Schritte, die aktiviert werden müssen in Reihenfolge nach jeweils 5 Sekunden. Wie kann ich es mit Javascript machen?

<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> 

usw.

Answer 1

Hier ist ein Ansatz Vanille js verwenden.

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>