Question

如何在同一div内使用不同的值绘制两个或更多jQuery进度条？

我需要在一个div中绘制两个进度条，这意味着我只能为创建id的函数提供一个progressBar。

目前我的职能是：

function drawbar(no,id_of_div) 
{
                 $(id_of_div).progressbar({ value:no });
                 $(id_of_div).css({background: '#99FF66'}); 
 }

我想要一个函数，它也会为第二个进度条取一个值，该值应该在同一个div内绘制。

类似的东西：

function drawbar(value_for_first , value_for_second ,id_of_div)
{
---------
------
}

任何人都可以帮助我吗？

Answer 1

我认为你必须将div放在div中，因为看起来jQuery UI progressbar填充了它的目标元素。 E.g：

function drawbar(value_for_first, value_for_second, id_of_div) {
    var target = $("#" + id_of_div);
    $("<div>").appendTo(target).progressbar({value: value_for_first});;
    $("<div>").appendTo(target).progressbar({value: value_for_second});
}

Live example

如果您不使用CSS（例如height），则可能需要css("height", "50%")。（我没有使用过jQuery UI进度条。）

如果您使用相同的功能更新，我们希望允许他们可能已经在那里：

function drawbar(value_for_first, value_for_second, id_of_div) {
    var target = $("#" + id_of_div),
        first  = target.find(".first"),
        second = target.find(".second");
    if (!first[0]) {
        first  = $("<div>").addClass("first").appendTo(target);
        second = $("<div>").addClass("second").appendTo(target);
    }
    first.progressbar({value: value_for_first});
    second.progressbar({value: value_for_second});
}

Live example - 请注意，它会显示初始值，然后暂停一秒，然后更新它们

jQuery：一个div中有两个进度条

1 个答案: