javascript - 如何使用 Javascript(jQuery 或 Angular)在语义 UI 中启用禁用的步骤

Question

我正在学习使用 Javascript 的语义 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

这是使用 vanilla 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>