Javascript jQuery-进度条和分页取决于显示的元素和元素数

我需要了解如何使用jQuery为我的联系人表单创建进度条和分页

我的表单的每个部分都被分成列表元素，例如

<form>
<ul>
<li class="section1 shown">
<label>label</label>
<input type="text"/>
</li>
<li class="section2 current">
<label>label</label>
<input type="text"/>
</li>
<li class="section3">
<label>label</label>
<input type="text"/>
</li>
</ul>
<div class="arrow"></div>
</form>

标签


标签


标签

---

最初加载页面时，section1仅在单击箭头之前可见，箭头随后显示section2，依此类推。我需要开发一个jQuery脚本，它计算总的节数，还计算当前类之前（包括当前类）的li元素数。然后将输出分页，例如2/3和进度条，例如宽度：66.6%

您可以更改事件cssClassChanged 例如：

---

非常感谢你，从这个答案我已经想出了如何做到这一点

var totalStageNumber = $('li').length;
var currentStageNumber = $('li.completed').length + $('li.current').length;
var progressBar = 100 / (totalStageNumber) * ((currentStageNumber) - 1) ;

$('.number-total').text('' + totalStageNumber + '');
$('.number-current').text('' + currentStageNumber + '');

$('.simform .progress').css({'width':progressBar + '%'});


$('div.next').on('click', function(){
    var currentStageNumber = $('li.completed').length + $('li.current').length;
    $('.number-current').text('' + currentStageNumber + '');

    var progressBar = 100 / (totalStageNumber) * ((currentStageNumber) - 1);
    $('.simform .progress').css({'width':progressBar + '%'});
});

<form>
<ul class="simform">
<li class="section1 shown">
<label>label</label>
<input type="text"/>
</li>
<li class="section2 current">
<label>label</label>
<input type="text"/>
</li>
<li class="section3">
<label>label</label>
<input type="text"/>
</li>
</ul>
<div class="controls">
<div class="progress"></div>
<div class="number-current"></div> / <div class="number-total"></div>
</div>
</form>

var totalStageEnumber=$（'li'）。长度；
var currentStageNumber=$（'li.completed'）.length+$（'li.current'）.length；
var progressBar=100/（TotalStageEnumber）*（（CurrentStageEnumber）-1）；
$（'.number total'）.text（''+TotalStageEnumber+''）；
$（'.number current'）.text（''+CurrentStageEnumber+''）；
$（'.simform.progress'）.css（{'width'：progressBar+'%'）；
$（'div.next'）。在（'click'，function（）上{
var currentStageNumber=$（'li.completed'）.length+$（'li.current'）.length；
$（'.number current'）.text（''+CurrentStageEnumber+''）；
var progressBar=100/（TotalStageEnumber）*（（CurrentStageEnumber）-1）；
$（'.simform.progress'）.css（{'width'：progressBar+'%'）；
});


标签


标签


标签


/ 

与分页不同，进度条显示已填充的框，而不是用户所在的阶段

我已将此表单转换为jquery

var totalStageNumber = $('li').length;
var currentStageNumber = $('li.completed').length + $('li.current').length;
var progressBar = 100 / (totalStageNumber) * ((currentStageNumber) - 1) ;

$('.number-total').text('' + totalStageNumber + '');
$('.number-current').text('' + currentStageNumber + '');

$('.simform .progress').css({'width':progressBar + '%'});


$('div.next').on('click', function(){
    var currentStageNumber = $('li.completed').length + $('li.current').length;
    $('.number-current').text('' + currentStageNumber + '');

    var progressBar = 100 / (totalStageNumber) * ((currentStageNumber) - 1);
    $('.simform .progress').css({'width':progressBar + '%'});
});

<form>
<ul class="simform">
<li class="section1 shown">
<label>label</label>
<input type="text"/>
</li>
<li class="section2 current">
<label>label</label>
<input type="text"/>
</li>
<li class="section3">
<label>label</label>
<input type="text"/>
</li>
</ul>
<div class="controls">
<div class="progress"></div>
<div class="number-current"></div> / <div class="number-total"></div>
</div>
</form>