Semantic UI에서 Javascript (jQuery 또는 Angular)로 비활성화 된 단계를 활성화하는 방법

Question

Javascript로 시맨틱 UI를 배우고 있고 "step enabling"(아래 코드 참조)에서 멈추었습니다. 5 단계를 활성화해야합니다. 각각 5 초 후에 순서대로. 자바 스크립트로 어떻게 할 수 있습니까?

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