2

私は自分のページにあるJqueryUIプログレスバーウィジェットのいくつかのインスタンスです。

私が抱えている問題は、最初の値のみをロードし、ページ上のすべてのバーを循環して一意の値を取得するのではなく、各バーのそれぞれを模倣することです。各関数が値を正しくループしていない理由を誰かが説明できますか？

フィドルを追加しました：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 に答える