javascript - jquery - 在 Yii2 中显示已完成步骤的多步进度条

Question

如何在订单状态更改为新状态后立即从一种状态转换到另一种状态。我在 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);

这是我的 JSfiddle http://jsfiddle.net/9cs776m0/1/

Answer 1

尝试

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);
    }
})();

我在酒吧上没有额外的类(class) half 就做到了

http://jsfiddle.net/9cs776m0/2/