Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery function used twice

Tags:

javascript

I have this code here which gives a progress bar for check boxes. I want to use multiple such progress bars in single page. How do I recall the function uniquely for each div?

$(window).load(function(){
$(function() {
    $("#remind").progressbar({
        value: 0,
        max: 100,
        textFormat: 'fraction',
        complete: function(event, ui) {
            alert("Job complete you lazy bum!");
        }
    });

    $('.option').on('change', function() {
        var total = 0;

        $('.option:checked').each(function() {
            total += parseInt($(this).val());
        });

        $("#remind").progressbar("value", total);
    });

});
});

This is the html part,

<div id="remind"></div>  
<div>
    <input type="checkbox" class="option" value="25"> Task 1<br>
    <input type="checkbox" class="option" value="25"> Task 2<br>
    <input type="checkbox" class="option" value="25"> Task 3<br>
    <input type="checkbox" class="option" value="25"> Task 4<br>
</div>

How do I have another div of same functionality work without interfering the other and yet without writing all the js with changed class and id names.

like image 885
user1814979 Avatar asked Aug 13 '26 01:08

user1814979


1 Answers

Well if the div holding the options ALWAYS follow the progressbar div you could use this connection in your script, ( line beginning with: + should be used instead of line with: - )

instead of id use class "remind":

+<div class="remind"></div> 
-<div id="remind"></div>

initialize progressbar by class instead of id:

+$(".remind").progressbar({
-$("#remind").progressbar({

use a localized search for the other checked options inside of the parent (div):

+$(this).parent().find('.option:checked').each(function() {
-$('.option:checked').each(function() {

and finally use the HTML structure to increase progress with prev div option:
*here plays the first sentence of my answer his role

+$(this).parent().prev('div.remind').progressbar("value", total);
-$("#remind").progressbar("value", total);

And welcome to stackoverflow! [:

Here is a jsFiddle to see it work.

like image 136
p1100i Avatar answered Aug 14 '26 13:08

p1100i



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!