2

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

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

添加了一个小提琴：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 );
       });
    });
4

2 回答 2

5

看到这个： 样本

利用：

  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)

于 2013-03-09T06:19:32.483 回答
0

你给了他们所有相同的类名。您需要有一种独立引用它们的方法。给他们不同的类名，或者一个额外的类名或一个 id 或其他东西。例如：

<div class="progress_bar bar1" value ="80"><div class="progress-label barlabel1">Loading...</div></div>
<div class="progress_bar bar2" value="20"><div class="progress-label barlabel2">Loading...</div></div>
<div class="progress_bar bar3" value="40"><div class="progress-label barlabel3">Loading...</div></div>

然后调整您的代码以单独处理每个。

于 2013-03-09T06:17:23.833 回答