jQuery-UI : Dialog remove class

Question

我有一个对话框，是用下面生成的 javascript 代码和 HTML 创建的。我想删除按钮的“ui-button-text-only”类，并为容器添加“style=font-size: 0.9em;”

你能帮我吗？

谢谢

HTML:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Save</span>
    </button>
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Cancel</span>
    </button>
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Delete</span>
    </button>
</div>

Javascript:

<div id="dialogProduct" title="MyTitle"></div>
<script type="text/javascript">
function CreateDialogProduct() {
    $("#dialogProduct").dialog({
        bgiframe: true, autoOpen: false, minHeight: 350, maxHeight: 450, height: 350,
        minWidth: 450, maxWidth: 550, width: 450,
        modal: true,
        buttons: {
            Save: function() {
                $.ajax({
                    type: "POST",
                    url: "/Product/SaveOrUpdate",
                    data: {...},
                    success: function(data) {...},
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                })
            },
            Cancel: function() {...},
            Delete: function() {
                $.ajax({
                    type: "POST",
                    url: "/Product/Delete",
                    data: {...},
                    success: function(data) {},
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                })
            }
        },
        beforeclose: function(event, ui) {
        }
    });
}    
jQuery(document).ready(function() {
    CreateDialogProduct();
});
</script>

Answer 1

$('button').removeClass("ui-button-text-only");
$('button:parent').css('font-size', '0.9em');

//or if you want to do it in a single line:
$('button').removeClass("ui-button-text-only").parent().css('font-size', '0.9em');

<小时/>

回复评论:如果您有一个 CSS 类，例如:

.small{
  font-size:0.9em;
}

在包含的 CSS 文件中，您可以执行以下操作:

$('button').removeClass("ui-button-text-only").parent().addClass('small');