如何在$ .each的迭代中打开一个jquery对话框?

时间:2014-06-12 00:15:54

标签: jquery json

我必须使用jquery将json数组对象中的一些数据加载到HTML表单中。问题是当我迭代json对象时,用户必须验证每行的输入。我试图这样做,但我总是只加载到表单中的最后一个值,如本例所示:http://jsfiddle.net/hQwwV/,但用户必须验证对话框中的每一对,而不仅仅是最后一对。如果有一种不同的方式我应该尝试这个,我可以尝试它,只要我可以循环json项目,因为我不知道数组的大小或内容提前。

示例代码:

var json = [
        {"id":"1","tagName":"apple"},
        {"id":"2","tagName":"orange"},
        {"id":"3","tagName":"banana"},
        {"id":"4","tagName":"watermelon"},
        {"id":"5","tagName":"pineapple"}
    ];

    $.each(json, function(idx, obj) {
    $("#id").val(obj.id);
    $("#tagName").val(obj.tagName);
    $("#dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "I've read and understand this": function() {
                $(this).dialog("close");
            }
        }
    });
    });

感谢。

1 个答案:

答案 0 :(得分:1)

您需要更新逻辑以不使用每个逻辑,但是等待用户输入继续下一步。您可以使用promises或更复杂的东西,但只是将队列出列就可以了:

http://jsfiddle.net/hQwwV/1/

var json = [
    {"id":"1","tagName":"apple"},
    {"id":"2","tagName":"orange"},
    {"id":"3","tagName":"banana"},
    {"id":"4","tagName":"watermelon"},
    {"id":"5","tagName":"pineapple"}
];

var queue = json.slice(0);

processValidationQueue(queue);

function processValidationQueue(queue) {
    var itm = queue.pop();
    $("#id").val(itm.id);
    $("#tagName").val(itm.tagName);
    $("#dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "I've read and understand this": function() {
                $(this).dialog("close");
                if (queue.length > 0) {
                    processValidationQueue(queue);
                }
            }
        }
    });
}