如何在jQuery中動態設置進度條值？

在我的教程網站上，我使用jQuery UI進度條而不是將會改變的條形圖，而是作爲顯示的圖像來向用戶顯示他們通過教程有多遠。例如：如何在jQuery中動態設置進度條值？

$(document).ready(function() { 
 
    $(.progressbar).progressbar({ 
 
    value: 50 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css"> 
 
<script type="text/javascript" src="JS/jQuery.js"></script> 
 
<script type="text/javascript" src="JS/jQueryUI.js"></script> 
 
<script type="text/javascript" src="JS/index.js"></script> 
 

 
<body> 
 
    Lots of stuff here 
 
    <div class="progressbar"></div> 
 
    <span style="text-align: center">50% complete</span> 
 
    Lots more stuff here 
 
</body>

不過，我想它做的事情是具有不同值的多個進度條。我想要一個進度條的類，以及它的值的自定義屬性。事情是這樣的：

$(document).ready(function() { 
 
    $(.progressbar).progressbar({ 
 
    value: $(.progressbar).attr("data-progress-value"); 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css"> 
 
<script type="text/javascript" src="JS/jQuery.js"></script> 
 
<script type="text/javascript" src="JS/jQueryUI.js"></script> 
 
<script type="text/javascript" src="JS/index.js"></script> 
 

 
<body> 
 
    Lots of stuff here 
 
    <div class="progressbar" data-progress-value="33"></div> 
 
    <span style="text-align: center">33% complete</span> Lots more stuff here 
 
    <div class="progressbar" data-progress-value="67"></div> 
 
    <span style="text-align: center">67% complete</span> More stuff here 
 
    <div class="progressbar" data-progress-value="90"></div> 
 
    <span style="text-align: center">90% complete</span> 
 
</body>

我知道這個代碼將不能工作，雖然，因爲jQuery的文檔說.attr和所有類似功能只得到第一個集的屬性。

在jQuery中是這樣的可能嗎？

或者，對於這裏顯示的XY問題，如果這不可行，我該如何動態設置靜態進度條？

預先感謝您。

來源

2017-07-30 OldBunny2800

在each()中相當簡單，您可以在初始化該元素的插件之前訪問每個元素實例。

$(function() { 
 
    $('.progressbar').each(function() { 
 
    var $el = $(this); 
 
    $el.progressbar({ 
 
     value: $el.data("progress-value") 
 
    }); 
 
    }); 
 
})

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 

 

 
Lots of stuff here 
 
<div class="progressbar" data-progress-value="33"></div> 
 
<span style="text-align: center">33% complete</span> Lots more stuff here 
 
<div class="progressbar" data-progress-value="67"></div> 
 
<span style="text-align: center">67% complete</span> More stuff here 
 
<div class="progressbar" data-progress-value="90"></div> 
 
<span style="text-align: center">90% complete</span>

來源

2017-07-30 12:42:38 charlietfl

這正是我一直在尋找對於！謝謝！ – OldBunny2800

什麼'|| 0'和'$ el $之前的'''做了嗎？ – OldBunny2800

值需要編號... attr（）返回字符串。 '|| 0'是默認情況下，如果屬性未定義或者不是 – charlietfl

你可以添加唯一的每個進度條的附加類，如PB1，PB2等

然後，只需

$(document).ready(function() { 
    $(.pb1).progressbar({ 
    value: 75 
    }); 
$(.pb2).progressbar({ 
    value: 50 
    }); 
});

來源

2017-07-30 12:50:58 Sam

感謝您的回答，但我一直在尋找可重用的不同HTML文件，其值可能不同。 – OldBunny2800

是的，我喜歡@charlietfl在這種情況下更好地回答。 – Sam

如何在jQuery中動態設置進度條值？

回答

相關問題