动态填充多个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) 
     }); 
    }); 
});