javascript - 将函数推送到对象字面量的前面

Question

我有一些 html 来弹出一个 jQuery UI 模式：

<a href="my/url" class="popup">Click me</a>

使用此 javascript 代码：

$('.popup').click(function() {
    var a = this;

    var dialog = $('<div>').load($(a).attr('href'), function() {
        var form = dialog.find('form');

        dialog.dialog({
            modal: true,
            title: $(a).attr('title'),
            buttons: {
                Add : function () {
                    $.post($(form).attr('action'), $(form).serialize());
                    dialog.dialog('close');
                },
                Cancel: function () {
                    dialog.dialog('close');
                }
            }
        });

        if ($(a).attr('data-third')) {
            // Add here a button
        }
    });
    return false;
});

这个想法是模态中的资源包含一个表单，在模态提交时表单被提交。现在，当<a href="my/url" class="popup" data-third="Add & new">Click me</a>存在时，这意味着第三个按钮按以下顺序放置在模式中：Cancel| Add| Add & new.

我试过这段代码：

if($(a).attr('data-third')) {
    var buttons = dialog.dialog('option', 'buttons');
    buttons[$(a).attr('data-third')] = function(){
        // Callback here
    }
    dialog.dialog('option', 'buttons', buttons);
}

我有一个新按钮，但顺序是Add & new| Cancel| Add. 我怎样才能确保订单是Cancel| Add| Add & new?

Answer 1

未经测试，但我想数组键应该是buttons.length这样的

if($(a).attr('data-third')) {
    var buttons = dialog.dialog('option', 'buttons');
    buttons[buttons.length] = function(){
        // Callback here
    }
    dialog.dialog('option', 'buttons', buttons);
}

Answer 2

使用此代码，您应该始终获得 Cancel | 添加 | 添新？（从左到右。

$('.popup').click(function() {
    var a = this;

    var dialog = $('<div>').load($(a).attr('href'), function() {
        var form = dialog.find('form');

        dialog.dialog({
            modal: true,
            title: $(a).attr('title'),
            buttons: {
                Cancel: function() {
                    dialog.dialog('close');
                },
                Add: function() {
                    $.post($(form).attr('action'), $(form).serialize());
                    dialog.dialog('close');
                }
            }
        });

        if ($(a).data('third')) {
            var buttons = dialog.dialog('option', 'buttons');
            console.log(buttons);
            buttons[$(a).data('third')] = function() {
                // Callback here
            }
            dialog.dialog('option', 'buttons', buttons);
        }
    });
    return false;
});

在这里小提琴：http: //jsfiddle.net/rqq2p/1/

请记住使用 data() 而不是 attrib() 从链接中获取属性！

编辑 - 基本上“按钮”是一个对象，每个属性都是按钮之一。我认为按钮出现的顺序是添加属性的顺序。在我的示例中，Cancel 是最左边的按钮，因为它是第一个添加的属性，而 add & new 它是最右边的，因为它是最新的。如果您需要摆弄顺序，您可以创建一个新对象并按您想要的顺序添加属性：

    if ($(a).data('third')) {
        var buttons = dialog.dialog('option', 'buttons');
        var newButtons = {};
        newButtons[$(a).data('third')] = function() {
            // Callback here
        }
        newButtons['Cancel'] = buttons['Cancel'];
        newButtons['Add'] = buttons['Add'];
        dialog.dialog('option', 'buttons', newButtons);//now add & new should be the leftmost
    }