jQuery，在表单发布期间查找元素的 ID

Question

我正在尝试从 div 中找到一个 id，以确定输入表单时要使用的正确 css 类。

将生成的 html 示例：

<div id="output">ERROR</div>
<div id="msg">Password did not match.</div>

现在我让它与我制作的插件一起使用，但不同之处在于它使用了 iframe，这里不是这种情况，所以我知道代码需要调整。

$.post("login.php", $('#login').serialize(), function(html){
                //see what message to display.
                var results = $(html).contents().find("#output").text();
                if (results == "success") {
                    FormResults("Success", $(html).contents().find("#message").text());
                }else if(results == "warning") {
                    FormResults("Notice", $(html).contents().find("#message").text());
                } else {
                    FormResults("Error", $(html).contents().find("#message").text());
                }
            }); //END $.ajax(

我希望我已经提供了足够的代码。如果没有，请告诉我。另外，如果您有更好的方法，我对您的任何想法都很感兴趣。

概念是，php 会生成两个 div，一个用于消息类型，另一个是实际消息。第一个 div 将告诉 jquery 为我正在使用的验证插件分配什么 css 以及要显示的消息。

Answer 1

我不太了解代码的逻辑，但我确实了解您想要实现的目标。

在我看来，更好的方法是为整个消息（包括消息的类型）提供一个包装器，并通过一个特殊的类名设置颜色或你想要的任何 CSS 规则。就像Plone 状态消息一样有效 (see the "Warning" message on top)

此处的工作示例：

http://jsfiddle.net/marcosfromero/8gbPg/

HTML：

<dl class="portalMessage error"><dt>Error</dt>
    <dd>This product has not had a release in over 1 year and may no longer be maintained. </dd>
</dl>

CSS：

主 css 应应用于 dl.portalMessage、.portalMessage .dt 和 .portalMessage .dd 选择器以及 error、success 或您需要的任何代码的特定颜色。

dl.portalMessage {
    font-size: 12px;
    background-color: #FFFFE3;
    border: 1px solid #996;
    margin-bottom: 1em;
}

dl.portalMessage dt {
    background-color: #996;
    font-weight: bold;
    float: left;
    margin: 0 0.5em 0 0;
    padding: 0.5em 0.75em;
    color: white;
    line-height: 1.25em;
}

dl.portalMessage dd {
    padding: 0.5em 0.5em;
    margin: 0;
    line-height: 1.25em;
}

dl.error {
    border-color: red;   
}

dl.error dt {
    background: red;   
}

dl.error dd {
    background-color: #FD7;
}

dl.success{
    border-color: navy;   
}

dl.success dt {
 background: navy;   
}

dl.success dd {
    background-color: #eee;
}