Question

我正在使用jQuery的Progressbar小部件，并且它第一次运行时一切都很好但是当它第二次使用时标签文本显示“false％”。我希望它从“0％”开始。

它的工作原理是：单击“.container”框时，它会打开一个模态窗口（jQuery的Dialog插件）并运行进度条。完成后，您可以关闭模态窗口。然后再次单击“.container”框，重新打开带有新进度条的对话框。

JS：

$("#dialog").dialog({
    autoOpen: false,
    closeOnEscape: false,
    draggable: false,
    dialogClass: "no-close",
    modal: true,
    close: function (event, ui) {
        $(".ui-dialog-buttonpane").remove();
        $("#dialog").removeAttr("style");
    }
});
$(".container").click(function () {
    $("#dialog").dialog("open");
    var progressbar = $("#progressbar"),
        progressLabel = $(".progress-label");
    progressbar.progressbar({
        value: false,
        change: function () {
            progressLabel.text(progressbar.progressbar("value") + "%");
        },
        complete: function () {
            progressLabel.text("Complete!");
            $("#dialog").dialog({
                buttons: [{
                    text: "OK",
                    click: function () {
                        $(this).dialog("close");
                    }
                }]
            });
        }
    });

    function progress() {
        var val = progressbar.progressbar("value") || 0;
        progressbar.progressbar("value", val + 2);
        if (val < 99) {
            setTimeout(progress, 80);
        }
    }
    setTimeout(progress, 2000);
});

HTML：

<div class="container">
    <div class="header">header</div>
    <div class="image"></div>
</div>
<div id="dialog" title="Progress">
    <p>
        <div id="progressbar">
            <div class="progress-label">0%</div>
        </div>
    </p>
</div>

Answer 1

这是因为第一次弹出时，它的值是在你的html页面上定义的，0%。

第二次使用.progressbar触发它时，当值设置为false时，触发更改并通过更改功能设置文本。

您可以添加progressLabel.text("0%");添加结尾：

setTimeout(progress, 2000);
// Set init text
progressLabel.text("0%");

现在，文字将再次为0%。

检查jsfiddle。

jQuery进度条标签显示“false”

1 个答案: