I am currently working on a function that dynamically adjusts the width of an element using JavaScript. Here is my JavaScript code:
<script>
$('.progress-fill span').each(function(){
var percent = $(this).html();
if(percent ==12){
$(this).parent().css({
'width' : "100%"
});
}
if(percent ==11){
$(this).parent().css({
'width' : "92%"
});
}
if(percent ==10){
$(this).parent().css({
'width' : "83%"
});
}
if(percent == 9){
$(this).parent().css({
'width' : "75%"
});
}
});
</script>
The HTML structure I am working with looks as follows:
<div class="results-block">
<div class="progress-bar">
<div class="progress-fill">
<span>12</span>
</div>
</div>
</div>
Essentially, I am fetching the value from the .progress-fill span and based on this value, setting the width of the parent div accordingly. Currently, I have implemented separate if statements to handle this operation, however, I believe there might be a more efficient way to achieve this. Any alternative suggestions on how to approach this would be greatly appreciated!