jQuery进度条给某些div值

我有一个模拟的多页面布局我正在研究。其中一些人有条件陈述来隐藏或显示他们。现在我已经在函数中设置了每次用户点击下一步时将进度条增加5。问题是，如果我隐藏了一些div并且它们从不出现，则进度栏不会正确增加。有没有办法给每个div一个值，以便当它被标记为未隐藏时读取它，以便相应地更新进度条？ Demo Here jQuery进度条给某些div值

这是我的股利布局：

<div class="Page" id="DealerInfo" style="display: block;"> 
    <script>$("#DealerInfo").load("formPages/DealerInfo.php");</script> 
</div> 

<div class="Page hidden" id="AdditionalLocations" style="display: none;"> 
    <script>$("#AdditionalLocations").load("formPages/AdditionalLocations.php"); </script> 
</div> 

<div class="Page" id="OwnerInfo" style="display: none;"> 
    <script>$("#OwnerInfo").load("formPages/OwnerInfo.php");</script> 
</div> 

<div class="Page" id="SalesInfo" style="display: none;"> 
    <script>$("#SalesInfo").load("formPages/SalesInfo.php");</script> 
</div>

这是函数

function nextForm() { 
     $(".Page:visible").hide().nextAll(".Page").not(".hidden").first().show(); 
     var value = $("#progressbar").progressbar("option", "value"); 
     $("#progressbar").progressbar("option", "value", value + 5); 
     $('.progress-label').text(value + "%"); 

}

这是我的按钮：

<p class="navigation"><button class="button" type="button" onclick="prevForm();">Previous</button>                    
           <button class="button" type="button" onclick="nextForm();">Next</button></p>

来源

2014-02-11 Yamaha32088

你能提供的jsfiddle演示 –

，您可以给DIV一类“完整”，然后计算divs的数量，完成vs未完成并计算完成百分比。 –

http://jsfiddle.net/65yQ8/ – Yamaha32088

为什么不能简单地计算完成的百分比功能多少.not('hidden') divs之前你的积极的一个除以总数为.not('hidden') divs？

function updateProgress() { 
    var value = $("#progressbar").progressbar("option", "value"); 
    if($(".Page:visible").length < 1) { 
     value = 100; 
    } else { 
     value = Math.floor(100*($(".Page:visible").prevAll(".Page:not(.hidden)").length)/($(".Page:not(.hidden)").length)); 
    } 
    $("#progressbar").progressbar("option", "value", value); 
    $('.progress-label').text(value + "%"); 
} 

function nextForm() { 
    $(".Page:visible").hide().nextAll(".Page").not(".hidden").first().show(); 
    updateProgress(); 
} 

function prevForm() { 
    $(".Page:visible").hide().prevAll(".Page").not(".hidden").first().show(); 
    updateProgress(); 
}

JSFiddle Demo

为您添加此部分将自动缩放。你根本不需要为div添加任何值。

如果你要显示/隐藏.hidden的div依赖于对问题的回答，干脆离开:not(.hidden)了选择的：

function updateProgress() { 
    var value = $("#progressbar").progressbar("option", "value"); 
    if($(".Page:visible").length < 1) { 
     value = 100; 
    } else { 
     value = Math.floor(100*($(".Page:visible").prevAll(".Page").length)/$(".Page").length); 
    } 
    $("#progressbar").progressbar("option", "value", value); 
    $('.progress-label').text(value + "%"); 
}

JSFiddle Demo

来源

2014-02-11 20:23:14

优秀的解决方案谢谢你！ – Yamaha32088

jQuery进度条给某些div值

回答

相关问题