我正在处理一个模拟的多页面布局。其中一些有条件语句来隐藏或显示它们。现在我在函数中设置了每次用户单击下一步时进度条增加 5。问题是,如果我隐藏了一些 div 并且它们从未出现,则进度条不会正确递增。有没有办法给每个 div 一个值,以便它在标记为未隐藏时读取它,以便相应地更新进度条? Demo Here
这是我的 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>
最佳答案
为什么不简单地计算完成的百分比作为有多少 .not('hidden')
div 在你的事件之前除以 .not('hidden' 的总数')
div?
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();
}
这将在您添加部分时自动缩放。您根本不需要向 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 + "%");
}
关于javascript - jQuery 进度条给某些 div 赋值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21710571/