jQuery函數使用了兩次

我這裏有這個代碼給出了複選框的進度條。我想在一個頁面中使用多個這樣的進度條。我怎麼記得了功能獨特的每個格？jQuery函數使用了兩次

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

我怎麼有不干擾對方，但沒有與改變class和id的名字寫的所有的JS相同的功能工作的另一個DIV。

來源

2012-11-10 user1814979

那麼，如果股利持有的選項一直跟着你可以使用你的腳本這方面，進度DIV（開始的一行：+應該被用來代替符合： - ）

，而不是ID使用類通過類而不是ID

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

初始化進度：「提醒」

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

使用本地化搜索內的其他檢查選項父（格）：

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

最後使用HTML結構，增加與上一個DIV選項進展：
*在這裏扮演我的回答他的角色的第一句話

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

而且歡迎計算器！ [：

這裏是一個jsFiddle看到它的工作。

來源

2012-11-10 19:56:32 p1100i

您必須將它們包裝在一個容器中並使用它來關聯它們，或者更好地爲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/

來源

2012-11-10 20:02:59

jQuery函數使用了兩次

回答

相關問題