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

我成功了，无需额外类half在酒吧

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