動態填充多個JQuery進度條

Question

我有幾個Jquery進度條，我需要動態填充，每個都有不同的值。

的HTML代碼如下附：

<div id="Wrapper"> 
<form method="POST" action="ClearPoll"> 
    <div id="mydiv" class="Gadget"> 
     <input class="PercentageHid" type="hidden" value="36" name="Percentage"> 
      <object class="GadgetActualImage" type="image/jpeg" data="http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg"> </object> 

     <div class="Information"> 
      <input class="PollViewName" type="text" value="Potatoe Masher" placeholder="Please Enter the Gadget Name" name="Name" readonly=""> 
      <textarea id="" class="GadgetDescription" name="Comment" cols="10" rows="4" readonly="">You'll Never Stop Mashing ! </textarea> 
     </div> 
      <div id="Potatoe Masher" class="ProgressBar ui-progressbar ui-widget ui-widget-content ui-corner-all" title="Gadget Reputation: 36.0 % " data-options="80" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="36"> 
      <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 36%;"></div> 
     </div> 
    </div> 
</form> 

<form method="POST" action="ClearPoll"> 
    <div id="mydiv" class="Gadget"> 
     <input class="PercentageHid" type="hidden" value="52" name="Percentage"> 
     <object class="GadgetActualImage" type="image/jpeg" data="http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg"> </object> 
    <div class="Information"> 
     <input class="PollViewName" type="text" value="Butter Slicer" placeholder="Please Enter the Gadget Name" name="Name" readonly=""> 
     <textarea id="" class="GadgetDescription" name="Comment" cols="10" rows="4" readonly="">No More Work </textarea> 
    </div> 
    <div id="Butter Slicer" class="ProgressBar ui-progressbar ui-widget ui-widget-content ui-corner-all" title="Gadget Reputation: 52.0 % " data-options="80" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="36"> 

    <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 36%;"></div> 
    </div> 
    </div> 

每一個進度條應取的值在隱藏的輸入字段「百分比」

我目前的JavaScript文件看起來是這樣的：

$(document).ready(function() { 
    var text = $(this).find('[name="Percentage"]').val(); 
    $(function() { 
     alert(text); 
     $('.ProgressBar').progressbar({ 
     value: parseInt(text) 
     }); 
    }); 
}); 

The JavaScript co但它會將百分比值設置爲所有進度欄，而不是相應的百分比值。

本質上，我需要的是在隱藏字段中獲取值並將該值應用於進度欄中相同的形式。

謝謝。

Answer 1

一般來說，當你需要初始化，需要多個實例，你需要遍歷所有的元素和單獨intialize，而不是一次對元素的整個集合初始化實例特定數據的插件：

在這種情況下你可以循環每個形式：

$(document).ready(function() { 

    $('form').each(function() { 
     var text = $(this).find('[name="Percentage"]').val(); 
     /* iniitialize the progress bar within this form*/ 
     $(this).find('.ProgressBar').progressbar({ 
      value: parseInt(text) 
     }); 
    }); 
});