Javascript jquery-多步骤进度条，用于在Yii2中显示已完成的步骤

如何在订单状态更改为新状态后立即从一种状态转换为另一种状态。我在Yii2中实现了这一点

    var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function() {
  $('.progress .circle:nth-of-type(' + i + ')').addClass('active');

  $('.progress .circle:nth-of-type(' + (i-1) + ')').removeClass('active').addClass('done');

  $('.progress .circle:nth-of-type(' + (i-1) + ') .label').html('✓');

  $('.progress .bar:nth-of-type(' + (i-1) + ')').addClass('active');

  $('.progress .bar:nth-of-type(' + (i-2) + ')').removeClass('active').addClass('done');

  i++;

  if (i==0) {
    $('.progress .bar').removeClass().addClass('bar');
    $('.progress div.circle').removeClass().addClass('circle');
    i = 1;
  }
}, 1000);

这是我的名片 试试看

var circles = $('.progress .circle');
var currentCircle = circles.first();
var previousCircle = $();

(function()
{
    currentCircle.addClass('active');
    previousCircle.removeClass('active').addClass('done');

    var bar = currentCircle.prev();
    bar.addClass('done');

    previousCircle = currentCircle;
    currentCircle = currentCircle.nextAll('.circle:first');

    if (previousCircle.length)
    {
        setTimeout(arguments.callee, 1000);
    }
})();

我没有在吧台上增加一半的课程就完成了

---

它不工作，在下一个状态更新之前不应更改。比如亚马逊订单状态栏。当他们更改订单状态时，只有进度条changes@Saurabh您是用setInterval编写的，没有触发下一个状态的按钮是的，因为我不知道如何编写它。您能帮助我吗？它能与数据库链接吗？由于当前状态将存储在数据库中，所以该条将根据存储在数据库中的状态进行移动。若您能提供，有任何示例链接吗？