Yii2：如何在Jquery

Question

尝试使用jquery实现自动递增步骤进度条。

将显示我的数据的表格

<table class="table" align="center">            
<tr>
<td>Job Code</td>
<td><b><?php echo ' ' . $dataProvider->models[0]->job_code; ?></b></td>
</tr>
<tr>
<td>Client Code</td>
<td><b><?php echo ' ' . $dataProvider->models[0]->client_code; ?></b></td>
 </tr>
<tr>
<td>Status</td>
<td id="status"><b><span class="label label-success"><?php echo ' ' . $dataProvider->models[0]->status; ?></b></td>
</tr>
</table>

JS -

$(document).ready(function() {
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);
});

我给表字段一个Id，我想像 -

那样推进这个栏

if(status=approved)
{
  progress up to one step
}
elseif(status==digital)
{
progress up to Digital
}
elseif(status==CDP)
{
progress up to CDP
}
elseif(status==Printing)
{
progress up to Printing
}
and so on...

脚本应该从表字段获取值，并且进度和步骤栏可以达到适当的状态。 怎么做到这一点？

Answer 1

要做类似的事情，你可以使用 Twitter Bootstrap Wizard Plugin 这很容易使用插件，你不需要做多个if条件和jQuery代码的向导。您可以看到 demo Here

您可以在 demo 中使用您的css样式而不是第一，第二等文字。