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

这是我的JSfiddle
http://jsfiddle.net/9cs776m0/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);
    }
})();

我在没有其他班级half的情况下做到了

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

关于javascript - jQuery-多步进度条以显示Yii2中已完成的步骤，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31241219/