Question

我在下面的代码中显示了一个警告对话框，其中只有一个＆＃39; OK＆＃39;按钮和确认对话框，其中包含＆＃39;取消＆＃39;并且＆＃39;确定（提交）＆＃39;按钮。

正如你所看到的那样，有很多重复的代码，我想知道是否有这样的写法，以便尽可能少的代码重复（不止一次写入）？

我正在快速学习jQuery但是如何更好地写这个？任何帮助或示例都会非常感激吗？非常感谢你

外部JS：

function alert() {
    var id = $('#dialog-alert');
    id.dialog({
        autoOpen: false,
        dialogClass: 'ui-alert',
        resizable: false,
        modal: true,
        width: 450,
        buttons: [{
            'text': 'OK',
            'class': 'btn btn-green',
            'click': function () { $(this).dialog('close'); }
        }]
    }).dialog('open');
    $('.ui-dialog :button').blur();
};

function confirm() {
    var id = $('#dialog-confirm');
    id.dialog({
        autoOpen: false,
        dialogClass: 'ui-alert',
        resizable: false,
        modal: true,
        width: 450,
        buttons: [{
            'text': 'Cancel',
            'class': 'btn btn-red',
            'click': function () { $(this).dialog('close'); }
        },
        {
            'text': 'OK',
            'class': 'btn btn-green',
            'click': function () { $('#completeform').submit(); }
        }]
    }).dialog('open');
    $('.ui-dialog :button').blur();
};

Answer 1

我得到了我想要的地方，感谢@Alnitak的帮助。我想要一个我可以调用对话框的功能，无论是警报还是确认，显示一个或两个按钮。我的解决方案适用于寻找类似内容的任何人。参数和条件语句的组合。

function dialog(id, btns) {
    var buttons = [{
        'text': 'OK',
        'class': 'btn btn-green',
        'click': function () { $(this).dialog('close'); }
    }]

    if (btns === confirm) {
        buttons = [{
            'text': 'Cancel',
            'class': 'btn btn-red',
            'click': function () { $(this).dialog('close'); }
        }, {
            'text': 'OK',
            'class': 'btn btn-green',
            'click': function () { $('#completeform').submit(); }
        }]
    };
    $('#dialog-' + id).dialog({
        autoOpen: false,
        dialogClass: 'ui-alert',
        resizable: false,
        modal: true,
        width: 450,
        buttons: buttons
    }).dialog('open');
    $('.ui-dialog :button').blur();
};

在HTML页面中：

$(function() { dialog('alert', alert); }); 
// or
$(function() { dialog('confirm', confirm); });

结合警报和确认（DRY）的jQuery UI对话框代码？

1 个答案: