jqueryだけを使用して動的プログレスバーを作成するにはどうすればよいですか？

jqueryを使用してプログレスバーのコードを書いたのは期待通りですが、2番目の要素を追加するとすべての要素が同じように動作します。なぜなら、動的にする必要があると思うのですが、どうすれば動的なものにすることができますか？ここjqueryだけを使用して動的プログレスバーを作成するにはどうすればよいですか？

HTML

<html lang="en"> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Document</title> 
    </head> 
    <body> 
     <div class="trustyou-progressbar pull-right"> 
      <p class="trustyou-puan">100/72 Puan</p> 
      <div class="progressFill"> 
       <span class="ani-puan" ani-puan="72"></span> 
      </div> 
     </div> 


     <div class="trustyou-progressbar pull-right"> 
      <p class="trustyou-puan">100/39 Puan</p> 
      <div class="progressFill"> 
       <span class="ani-puan" ani-puan="39"></span> 
      </div> 
     </div> 
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    </body> 
</html>

CSS

.trustyou-progressbar{ 
    width:100px; 
} 
.trustyou-puan{ 
    font-size: 13px; 
    color:#494949; 
    font-weight: 500; 
} 
.progressFill{ 
    width:100%; 
    height:6px; 
    background:#222222; 
} 
.ani-puan{ 
    display:block; 
    height:100%; 
}

jQueryの

var getprogressPuan = $('.ani-puan').attr('ani-puan'); 
    $(".ani-puan").css("width",getprogressPuan+"%"); 
    if((getprogressPuan>0) && (getprogressPuan<=40)){ 
     $(".ani-puan").css("background","#ca2424"); 
    }else if((getprogressPuan>=40) && (getprogressPuan<75)){ 
     $(".ani-puan").css("background","#d6d824"); 
    }else if((getprogressPuan>=75)){ 
     $(".ani-puan").css("background","#9ad204"); 
    }

click to see demo

出典

2016-10-13 ani_css

すべての要素に、あなたの関数を適用するイテレータを使用します。

$('.ani-puan').each(function() { 

    var getprogressPuan = $(this).attr('ani-puan'); 
    $(this).css("width", getprogressPuan + "%"); 
    if ((getprogressPuan > 0) && (getprogressPuan <= 40)) { 
    $(this).css("background", "#ca2424"); 
    } else if ((getprogressPuan >= 40) && (getprogressPuan < 75)) { 
    $(this).css("background", "#d6d824"); 
    } else if ((getprogressPuan >= 75)) { 
    $(this).css("background", "#9ad204"); 
    } 

});

Here is the sample page

出典

2016-10-13 07:05:30

はcodepenリンクです：http://codepen.io/kofijita/pen/WGyzQY

$（ "。ani-puan"）は2つの要素を取得します。イテレータを使用してそれらを区別する必要があります。

var $puan = $('.ani-puan'); 
for (var i = 0, len = $puan.length; i < len; i++) { 
    var $cur = $('.ani-puan').eq(i); 
    var getprogressPuan = $cur.attr('ani-puan'); 
    $cur.css("width", getprogressPuan + "%"); 
    if ((getprogressPuan > 0) && (getprogressPuan <= 40)) { 
     $cur.css("background", "#ca2424"); 
    } else if ((getprogressPuan >= 40) && (getprogressPuan < 75)) { 
     $cur.css("background", "#d6d824"); 
    } else if ((getprogressPuan >= 75)) { 
     $cur.css("background", "#9ad204"); 
    } 
}

出典

2016-10-13 07:00:32

このコードは、ani-puanクラスのすべての要素を変更するだけです。

各プログレスバーを個別に操作するには、jQueryコンポーネント（ウィジェット）を作成する必要があります。

まず、How to Create a Basic Pluginを読んでから、jQuery UI's progressbar source codeを調べると、その動作を確認できます。

あなたが気にしない場合は、download the jQuery UI progressbar（あなたはjQuery UI全体を必要としません）し、必要なものを変更することができます。

また、HTML5には、すでに必要な内容（色の変更を含む）のコンポーネントprogressが含まれています。

出典

2016-10-13 07:02:30

ます。また、このように簡単にプログレスバーを作成することができます

var i = 0; 
 
var clear = setInterval(function(){ 
 
    i++; 
 
    $('.progressFill').text(i+'0%'); 
 
    $('.progressFill').width(i+'0%'); 
 
    if(i==10) 
 
    { 
 
     clearInterval(clear); 
 
    } 
 
},1000);

.trustyou-progressbar{ 
 
width: 100px; 
 
background-color: #000000; 
 
} 
 
.trustyou-puan{ 
 
    font-size: 13px; 
 
    color:#494949; 
 
    font-weight: 500; 
 
} 
 
.progressFill{ 
 
    width: 0%; 
 
    height: 6px; 
 
    background: #15D318; 
 
} 
 
.ani-puan{ 
 
    display:block; 
 
    height:100%; 
 
}

<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="UTF-8" /> 
 
\t \t <title>Document</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="trustyou-progressbar pull-right"> 
 
\t \t \t <div class="progressFill"> 
 
\t \t \t \t <span class="ani-puan" ani-puan="72"></span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    
 
\t \t <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
\t </body> 
 
</html>

出典

2016-10-13 07:07:55

jqueryだけを使用して動的プログレスバーを作成するにはどうすればよいですか？

答えて

関連する問題