Question

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

我遇到的问题是它只加载第一个值，并模仿每个条形图，而不是循环遍历页面上的所有条形并获取唯一值。任何人都可以解释为什么每个函数没有正确循环这些值？

<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)

获取自己的属性/子级

Answer 2

你给了他们所有相同的班级名字。你需要有一种独立引用它们的方法。给他们不同的类名，或额外的类名或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>

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

Jquery多个动态进度条

Jquery的

2 个答案: