在其他对话框打开且我们不希望它们更改时更改 jquery 对话框标题的颜色答案

【问题标题】：Changing color of header of a jquery dialog box while other dialog boxes are open and we don't want them to change在其他对话框打开且我们不希望它们更改时更改 jquery 对话框标题的颜色
【发布时间】：2013-12-07 08:08:42
【问题描述】：

我有一个由 jquery 制作的编辑/更新对话框，它是打开的，在用户单击提交按钮后，我想用另一个 jquery 对话框显示操作的结果。问题是我希望根据结果（无论是成功还是失败）更改结果对话框的标题颜色。它要么起作用，并使当前打开的所有对话框的颜色都更改为该特定颜色，要么根本不起作用。这是代码：

这是css：

<style type="text/css">
.ui-widget-header {
    color:white;
    background:#012567;
    font-family:Tahoma;
    font-weight:bold;
}

.ui-exclamation-message{
    background:#c2c80d;
}

.ui-success-message{
    background:#066417;
}

.ui-failed-message{
    background:#670500;
}
</style>

这是 jQuery 部分：

function message_dialog_open() {

    switch ($("#messageType").attr("value").toString())
    {
        case "Exclamation":
            $(".ui-widget-header").addClass("ui-exclamation-message");
            break;
        case "Failed":
            $(".ui-widget-header").addClass("ui-failed-message");
            break;
        case "Success":
            $(".ui-widget-header").addClass("ui-success-message");
            break;
    }

    $(".message-dialog-window").dialog("open");
}

这是剃须刀部分：

@using (Ajax.BeginForm("Edit", new AjaxOptions { UpdateTargetId = "message-dialog-window", HttpMethod = "POST", OnSuccess = "message_dialog_open" }))

这是控制器/动作部分：

[HttpPost]
public PartialViewResult Edit(T_account newAccount)
{
            var _result = new account().UpdateAccount(newAccount);
            if (_result == false)
                return PartialView("_Message", new Message { type = MessageType.Failed, text = "failure message" });
            return PartialView("_Message", new Message { type = MessageType.Success, text = "success message" });

最后是 html 部分：

<div class="dialog-window edit-dialog-window" id="edit-dialog-window" title="update account information"></div>

<div class="dialog-window message-dialog-window" id="message-dialog-window" title="Request's result"></div>

消息类型属性将存储在 _Message 部分视图的隐藏输入中。并在基于该值的 jquery 中，我尝试通过添加适当的类来更改 ui-widget-header 的颜色。问题是当我尝试通过这个选择添加类时： $(".ui-widget-header").addClass("ui-success-message");

程序会将该类添加到每个带有“ui-widget-header”类的元素中。这意味着所有以前打开的对话框也会改变其标题的颜色。如果尝试使用此选择器： $("div#message-dialog-window .ui-widget-header").addClass("ui-success-message");它不起作用，因为显然标题元素不是 div#message-dialog-window 的一部分。它们应该是因为 ajaxOption : UpdateTargetId = "message-dialog-window" 当我想使用 ajax 表单时使用的。

如果有人能说出发生了什么，我将不胜感激。或者我怎样才能以任何其他方式得到我想要的东西。

PS：抱歉我的帖子太长，英语不好:)

【问题讨论】：

标签： jquery css asp.net-mvc jquery-ui asp.net-mvc-4

【解决方案1】：

我找到了答案。它似乎有效。但我不确定多个嵌套消息。这是解决方案。我已将 jQuery 函数更改为仅将 Class 添加/删除到最后一个“ui-widget-header”元素，该元素应该是显示给用户的最后/当前消息：

function message_dialog_open() {

    $(".ui-widget-header").last().removeClass("ui-exclamation-message");
    $(".ui-widget-header").last().removeClass("ui-failed-message");
    $(".ui-widget-header").last().removeClass("ui-success-message");

    switch ($(".messageType").last().attr("value").toString())
    {
        case "Exclamation":
            $(".ui-widget-header").last().addClass("ui-exclamation-message");
            break;
        case "Failed":
            $(".ui-widget-header").last().addClass("ui-failed-message");
            break;
        case "Success":
            $(".ui-widget-header").last().addClass("ui-success-message");
            break;
    }

    $(".message-dialog-window").dialog("open");
}

【讨论】：