jQuery進度條給某些div值

我有一個模擬的多頁面佈局我正在研究。其中一些人有條件陳述來隱藏或顯示他們。現在我已經在函數中設置了每次用戶點擊下一步時將進度條增加5。問題是，如果我隱藏了一些div並且它們從不出現，則進度欄不會正確增加。有沒有辦法給每個div一個值，以便當它被標記爲未隱藏時讀取它，以便相應地更新進度條？ Demo Here jQuery進度條給某些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>

來源

2014-02-11 Yamaha32088

你能提供的jsfiddle演示 –

，您可以給DIV一類「完整」，然後計算divs的數量，完成vs未完成並計算完成百分比。 –

http://jsfiddle.net/65yQ8/ – Yamaha32088

爲什麼不能簡單地計算完成的百分比功能多少.not('hidden') divs之前你的積極的一個除以總數爲.not('hidden') divs？

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

來源

2014-02-11 20:23:14

優秀的解決方案謝謝你！ – Yamaha32088

jQuery進度條給某些div值

回答

相關問題