javascript - jQuery 进度条给某些 div 赋值

Question

我正在处理一个模拟的多页面布局。其中一些有条件语句来隐藏或显示它们。现在我在函数中设置了每次用户单击下一步时进度条增加 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>

Answer 1

为什么不简单地计算完成的百分比作为有多少 .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();
}

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