How can I make dynamic progress bar using just jquery?
Question
I wrote a code for progressbar using jquery it works as expect but if I add second element all element works same that is why I guess I have to make it dynamic but I have no idea to do how can I make it as dynamic ?
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");
}
4 answers
solution1
1 ACCPTED 2016-10-13 07:05:30
Use an iterator to apply your function to all elements:
$('.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");
}
});
solution2
0 2016-10-13 07:00:32
here is the codepen link: http://codepen.io/kofijita/pen/WGyzQY
the $(".ani-puan") will get two elements , you should use iterator to differ them.
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");
}
}
solution3
0 2016-10-13 07:02:30
This code just changes all elements with ani-puan class.
You need to create a jQuery component (a widget) to work with each progressbar separately.
Start by reading How to Create a Basic Plugin and then you can study jQuery UI's progressbar source code to see how they do it.
If you don't mind, you can download the jQuery UI progressbar (you don't need whole jQuery UI) and just change what you need.
Also note that HTML5 already contain component progress that already does what you need (including changing the colors).
solution4
0 2016-10-13 07:07:55
You can also create Progress bar easily like this:
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"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div class="trustyou-progressbar pull-right"> <div class="progressFill"> <span class="ani-puan" ani-puan="72"></span> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.