Jquery多个动态进度条

Question

我的页面上有几个 Jquery UI 进度条小部件的实例。

我遇到的问题是它只加载第一个值，并模拟每个条形的每个值，而不是循环浏览页面上的所有条形并获取唯一值。谁能解释为什么每个函数没有正确循环遍历值？

添加了一个 fiddle :http://jsfiddle.net/Uy9cA/25/

<div class="progress_bar" value="20"><div class="progress-label">Loading...</div></div> <div class="progress_bar" value="40"><div class="progress-label">Loading...</div></div>

Jquery

  $(function() {  
  $('.progress_bar').each(function() {
        var progressbar = $( ".progress_bar" ),
        progressLabel = $( ".progress-label" ),
        progressvalue = $(".progress_bar").attr('value');
        console.log(progressvalue);  

        progressbar.progressbar({
        value: false,
        change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "% Complete" );
        },
        complete: function() {
        progressLabel.text( "Complete!" );
       }
       });

      function progress() {        
      var val = progressbar.progressbar( "value" ) || 0;

       progressbar.progressbar( "value", val + 1 )
      .removeClass("beginning middle end")
      .addClass(val < 40 ? "beginning" : val < 80 ? "middle" : "end");

      if ( val < progressvalue ) 
      {
        setTimeout( progress, 100 );
       }
      }

    setTimeout( progress, 100 );
       });
    });

Answer 1

请参阅: Sample

用途:

  var progressbar = $(this),
    progressLabel = $(this).find( ".progress-label" ),
    progressvalue = $(this).attr('value');

而不是:

 var progressbar = $( ".progress_bar" ),
    progressLabel = $( ".progress-label" ),
    progressvalue = $(".progress_bar").attr('value');

对于每个 .progress_bar 类，您必须使用 $(this) 获取其自己的属性/子级