jQuery進度條為某些div提供值

Question

我正在進行模擬的多頁面布局。 他們中的一些人有條件陳述來隱藏或顯示它們。 現在我在函數中設置了每次用戶點擊下一步時將進度條增加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>

這是功能

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演示

這將在您添加部分時自動縮放。 您根本不需要為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演示