Javascript jQuery进度条为某些div提供值

我有一个模拟的多页布局，我正在工作。其中一些有条件语句来隐藏或显示它们。现在我在函数中设置了每次用户单击next时将进度条增加5。问题是，如果我隐藏了一些div，但它们从未出现，则进度条不会正确递增。是否有方法为每个div指定一个值，以便它在标记为unhidden时读取该值，从而相应地更新进度条

这是我的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>

这些是我的按钮：

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

以前的
下一个

为什么不简单地计算一个完成百分比，作为活动div之前的

.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演示吗？你可以给div一个“complete”类，然后计算完整div与未完成div的数量，并计算完成百分比。我现在有20个div，以后可能还会添加更多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();
}

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 + "%");
}