Question

我有以下脚本用于创建带按钮的模态。我刚才有第一行：

$.modal = function(options)
    {
        var settings = $.extend({}, $.modal.defaults, options),
            root = getModalDiv(),

            // Vars for resizeFunc and moveFunc
            winX = 0,
            winY = 0,
            contentWidth = 0,
            contentHeight = 0,
            mouseX = 0,
            mouseY = 0,
            resized, content = '', contentObj;

然后再说：

    var buttonsFooter = false;
    $.each(settings.buttons, function(key, value)
    {
        // Button zone
        if (!buttonsFooter)
        {
            buttonsFooter = $('<div class="block-footer align-'+settings.buttonsAlign+'"></div>').insertAfter(contentBlockWrapper);
        }
        else
        {
            // Spacing
            buttonsFooter.append('&nbsp;');
        }

这是我创建模态的方式：

$.modal({
                    title: title,
                    closeButton: true,
                    content: content,
                    complete: function () {
                        applyTemplateSetup();
                        $($('#main-form')).updateTabs();
                    },
                    width: 900,
                    resizeOnLoad: true,
                    buttons: {
                        'Submit' : function () {
                            formSubmitHandler($('#main-form'));
                        }
                    }
                });

我想要做的是使用此脚本创建带有按钮的模态并动态分配按钮名称。但是，当我尝试用“javascript”变量的名称替换“提交”时，它不起作用。有谁知道我怎么做我需要的东西？

Answer 1

用变量名替换'Submit'的原因不起作用是因为以这种方式定义对象时不需要引号（除非名称包含一些特殊字符）。 var obj = { 'Submit': function() { } }与var obj = { Submit: function() { } }完全相同。

你会注意到你已经在传递给$.modal()的对象中省略了这样的引号。

然而，虽然你不能写

var myVariable = 'abc';
var obj = { myVariable: 3 };

...并且期望obj.abc存在（obj.myVariable将存在），您可以写

var myVariable = 'abc';
var obj[myVariable]  = 3;

...而obj.abc 将存在。

因此，您可以通过以下方式解决问题：

var buttons = { };

buttons[variableName] = function () {
   formSubmitHandler($('#main-form'));
};

$.modal({
   ...
   buttons: buttons
});

Answer 2

编辑：David Hedlund打败我回答，并提供了一个类似的答案，其中涉及的代码修改少了一点。他建议只打破按钮选项而不是整个选项var。 结束修改

首先，将选项分解为变量：

var modalOpts = {
    title: title,
    closeButton: true,
    content: content,
    complete: function () {
        applyTemplateSetup();
        $($('#main-form')).updateTabs();
    },
    width: 900,
    resizeOnLoad: true,
    buttons: {
        'Submit' : function () {
            formSubmitHandler($('#main-form'));
        }
    }
};

$.modal(modalOpts);

然后从选项中删除有问题的按钮，并使用方括号表示法来访问和写入属性：

var dynamicButtonName = 'Submit'; //Or whatever

var modalOpts = {
    title: title,
    closeButton: true,
    content: content,
    complete: function () {
        applyTemplateSetup();
        $($('#main-form')).updateTabs();
    },
    width: 900,
    resizeOnLoad: true,
    buttons: {}
};

modalOpts.buttons[dynamicButtonName] = function () {
    formSubmitHandler($('#main-form'));
};

$.modal(modalOpts);

如何在jquery模式脚本中动态命名按钮？

2 个答案: