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，而无需使用已更改的类和ID名称编写所有j。

Answer 1

如果持有选项的div总是跟随进度条div，你可以在你的脚本中使用这个连接，（行开头：+应该用来代替行： - ）

而不是id使用类“提醒”：

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

按类而不是id：

初始化进度条

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

使用本地化搜索父（div）内的其他选中选项：

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

最后使用HTML结构来增加prev div选项的进度：
*这里播放了我的回答第一句话

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

Jquery函数使用了两次

2 个答案: