jQuery进度条为某些div提供值

Question

<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')分区除以.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: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演示

当您添加节时，这将自动缩放。您根本不需要向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").length)/$(".Page").length);
    }
    $("#progressbar").progressbar("option", "value", value);
    $('.progress-label').text(value + "%");
}