jquery - 样式 jQuery 对话框按钮

Question

我在 JS 文件中有一个函数，可用于将按钮动态添加到对话框:

 function addNewDialogButtons(buttons, id) {
var buttonPane = $(id).parent().find('.ui-dialog-buttonset');
$(buttonPane).empty();
$.each(buttons, function (index, props) {
    var newButton = $('<button></button>', {
        id: 'btn' + id + props.id,
        text: props.text
    });
    newButton.button().unbind().on("click", props.click);
    $(buttonPane).append(newButton);
});
}

在页面中我这样做:

 var buttons;
            var titleText = "Status Details";
            if (id == null) {
                buttons = [{ text: "Cancel", click: function () { CloseDialog("#divDetails") } }, { text: "Save", click: function () { AddStatus() } }];
                addNewDialogButtons(buttons, "#divDetails");
            }
            else {
                buttons = [{ text: "Cancel", click: function () { CloseDialog("#divDetails") } }, { text: "Save Changes", click: function () { UpdateStatus() } }];
                addNewDialogButtons(buttons, "#divDetails");
            }
            $(buttons).css("border", "1px solid blue");

我在 css 文件中有一个类:

 .displaybutton {
font-size: x-small;
background-color: whitesmoke;
color: blue;
border: 1px solid blue;
border-radius: 10px;
}

我尝试过在add函数中，在dialog的open函数中，以及其他几种方式添加类，但收效甚微。它似乎唯一做的就是将文本设置为 x-small。该类的其余部分没有用到，颜色，边框等。

关于如何做到这一点有什么想法吗？

Answer 1

问题是 var buttons 不是实际的按钮，而只是它在您的函数中的定义。因此，当您稍后执行 $(buttons).css(...) 时，jQuery 找不到对象“buttons”。您有以下改进的可能性:

• 在函数 addNewDialogBu​​ttons() 中应用 css 样式
• 将css信息外包到一个css文件中，只需要添加一个class 你的按钮。
• 从你的函数中返回按钮对象
  addNewDialogBu​​ttons() 并将该对象用于您的 css 指令。