Функция Jquery используется дважды

Question

У меня есть этот код здесь, который дает индикатор выполнения для флажков. Я хочу использовать несколько таких индикаторов выполнения на одной странице. Как я могу однозначно запомнить функцию для каждого 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); 
    }); 

}); 
}); 

Это HTML часть,

<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> 

Как у меня есть еще один DIV с тем же функциональностью работы без вмешательства других, и все же без написания всех JS с измененными именами классов и идентификаторов.

Answer 1

Ну если ДИВ держит варианты ВСЕГДА следовать Progressbar DIV вы могли бы использовать это соединение в сценарии, (строка, начиная с: + следует использовать вместо строки с: -)

вместо идентификатора использования класса «напоминают»:

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

инициализации прогрессбар классом вместо ID:

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

использовать локализованный поиск для других отмеченных вариантов внутри в родитель (дела):

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

и, наконец, использовать структуру HTML, чтобы увеличить ход с опцией пред сНа:
* здесь играет первое предложение моего ответа его роль

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

И Добро пожаловать в stackoverflow! [:

Здесь jsFiddle, чтобы увидеть его работу.

Answer 2

Вы должны либо обернуть их в контейнер, либо использовать их для их связывания, либо лучше дать input элементам атрибут data-, который свяжет их с их индикатором выполнения.

HTML

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

JQuery

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

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

    $('input[data-progress="'+progressbarID+'"].option:checked').each(function() { 
     total += parseInt($(this).val()); 
    }); 

    $('#'+progressbarID).progressbar("value", total); 
}); 

Демонстрация наhttp://jsfiddle.net/kksXU/