javascript - 如何在Jquery中重置进度条

Question

当我将卡片添加到收件箱列表时，可以双击该卡片以打开模式对话框。在对话框中可以动态添加一些复选框。选中复选框后，进度条会更改值。

问题是，假设我创建了 2 个复选框，然后选中其中之一，进度条将显示已完成 50%。之后，我保存数据并按下保存按钮。对话框关闭。

然后，当我将新的一张卡片添加到收件箱列表并双击它打开对话框时，进度条仍然显示 50% 的值。您可以在下图中看到问题:

我尝试使用下面的代码自行修复它:但它似乎不起作用。

$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());

Live Demo

添加新卡后如何重置进度条？

HTML:

<!--Modal Dialog-->
<div id="modalDialog">
    <form>

        <input type="button" id="Save" value="Save Data" />
        <hr/>
        <br/>
        <label>Add checkBox</label>
        <br />
        <div id="progressbar"></div>
        <br />
        <input type="text" id="checkBoxName" />
        <input type="button" id="btnSaveCheckBox" value="_Ok" />

    </form>
</div> 

Jquery:

$(function () {
    // Click function to add a card
    var $div = $('<div />').addClass('sortable-div');

    var cnt = 0,
        $currentTarget;
    $('#AddCardBtn').click(function () {
        var $newDiv = $div.clone(true);
        cnt++;
        $newDiv.prop("id", "div" + cnt);

        $newDiv.data('checkboxes', []);

        $('#userAddedCard').append($newDiv);
        //      alert($('#userAddedCard').find("div.sortable-div").length);        
    });

    // Double click to open Modal Dialog Window
    $('#userAddedCard').dblclick(function (e) {
        $currentTarget = $(e.target);

        $('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());

        $('.allcheckbox').remove(); // Remove checkboxes
        $('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */

        /* Add checkboxes from card data */
        $.each($currentTarget.data('checkboxes'), function (i, checkbox) {
            addCheckbox(checkbox.name, checkbox.status);
        });

        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center'
        });
        return false;

    });
    $("#datepicker").datepicker({
        showWeek: true,
        firstDay: 1
    });

    $("#Save").on("click", function () {
        /* Copy checkbox data to card */
        $currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); 

        $('#modalDialog').dialog("close");
    });

    // Add a new checkBox
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    function addCheckbox(name, status) {
        status = status || false;

        var container = $('#modalDialog');
        var inputs = container.find('input');
        var id = inputs.length + 1;
        var data = {
            status: status,
            name: name
        };

        var div = $('<div />', { class: 'allcheckbox' });
        $('<input />', {
            type: 'checkbox',
            id: 'cb' + id,
            value: name
        }).prop('checked', status).on('change', function () {
            data.status = $(this).prop('checked');
        }).appendTo(div); /* set checkbox status and monitor changes */

        $('<label />', {
            'for': 'cb' + id,
            text: name
        }).appendTo(div);

        div.appendTo(container);

        container.data('checkboxes').push(data);

        updateProgress();
    }

$(document).on('change', 'input[type="checkbox"]', updateProgress);

    $("#progressbar").progressbar({
        value: 0,
        max: 100
    });        


function updateProgress() {
    var numAll = $('input[type="checkbox"]').length;
    var numChecked = $('input[type="checkbox"]:checked').length;

    if (numAll > 0) {
        var perc = (numChecked / numAll) * 100;
        $("#progressbar").progressbar("value", perc)
        .children('.ui-progressbar-value')
        .html(perc.toPrecision(3) + '%')
        .css("display", "block");
    }
}   


});

Answer 1

当您单击“保存”按钮时，只需重置 #progressbar 值，如下所示:

$('#progressbar').progressbar('option', 'value', 0);

您可以在http://api.jqueryui.com/progressbar/#option-value查看文档