Question

I am using the jQuery plugin minddust/bootstrap-progressbar to animate progress bars.

http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-1-1/#m-custom-percentage-format

I also have a span tag class="updatePrecent" with the percentage text beside each of the progress bars which I wish to animate. The plugin has functions to animate the text inside the progress bar or animate a single span, but not text beside many progress bars.

It does have a callback function with the percentage value but my knowledge of javascript is limited and research I have done does not cove this particular situation.

There will be many progress bars produced from a loop.

<td>
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" aria-valuenow="100">                                     
            <span class="sr-only">100% Complete (success)</span>
        </div>
    </div>
</td>
<td><span class="updatePrecent"></span>%</td>

The script:

$('.progress .progress-bar').progressbar({
    transition_delay: 1500,
    percent_format: function(p) {
        return p + ' percent';
    }
});

I have tried this and variations of it inside the function but no effect.

percent_format: function(p) {
    $this.parent().next('.updatePrecent').text(p);

Answer 1

I think you are looking for update callback and not percent_format.

You can do something like this

update: function(current_percentage, $this){
    $this.closest('td').next().find('.updatePrecent').text(current_percentage);
}

.closest() will match the first ancestor element and from there you can do .next() which will get the next td and then you have to use find to get the span.

Here is a demo http://jsfiddle.net/dhirajbodicherla/abwkorq7/5/

javascript callback function to update span

1 个答案: