CSS 颜色样式取决于返回的 Ajax 响应答案

【问题标题】：CSS colour styles depending on returned Ajax responseCSS 颜色样式取决于返回的 Ajax 响应
【发布时间】：2018-06-02 12:21:45
【问题描述】：

当我的 PHP 返回错误时，我想更改我的错误状态 CSS。

我认为我可以将.css({'background-color':'red'}) 添加到如下所示的错误函数中，但这不起作用。

我可以调用一个类并在我的 CSS 中设置样式列表可能更好？

目前我的成功和错误返回 alert-primary 我希望 error 作为 alert-danger 返回，但我不知道如何将两者分开。

function validateForm() {
    $.ajax({
        url: "register.php",
        type: "POST",
        data: $('#registration-form').serialize(),
        success: function (data, textStatus, jqXHR) {
            $('#status').text(data.message);
            if (data.code) //If mail was sent successfully, reset the form.
                $('#registration-form').closest('form').find("input[type=text],textarea").val("");},
        error: function (jqXHR, textStatus, errorThrown) {
            $('#status').text(jqXHR).css({ 'background-color': 'red' });
        }
    });

}

<div class="alert hide" role="alert hide">
    <div class=" alert-primary">
        <div class="status" id="status"></div>
    </div>
</div>

【问题讨论】：

由于您完全在您得到答案之后改变了您的问题的性质，因此我将其退回到这些更改之前。 问题发布后不要更改。这就像移动球门柱一样，会使任何答案无效并让未来的访问者感到困惑。如果您对新事物感到困惑，请提出一个新问题。

标签： javascript php ajax

【解决方案1】：

我建议您为此使用适当的 CSS 类。

在您的 CSS 文件中添加以下 CSS 类：

.error {
    background-color: red;
}

然后你只需在元素上添加该类而不是内联 CSS：

$('#status').addClass('error').text(...the message...);

现在你已经把你的顾虑分开了。

【讨论】：

我已经设置好了，现在我有一个错误和成功的 css，但我只显示错误。
$.ajax({ url : "register.php", type: "POST", data :$('#registration-form').serialize(), success: function(data, textStatus , jqXHR) { $('#status').addClass("successCSS").text(data.message); $('#status').addClass("errorCSS").text(data.errormessage); if ( data.code) //如果邮件发送成功，重置表单 $('#registration-form').closest('form').find("input[type=text], textarea").val(" "); }, 错误：函数 (jqXHR, textStatus, errorThrown) { $('#status').text(jqXHR); } });
为什么在成功回调中同时添加successCSS 和errorCSS？如果两个类都设置了相同的 css-properties，那么只会使用最后一个 (errorCSS) 中的值。
因为似乎所有消息都通过该类......成功：函数也显示错误消息。我注意到当我将 css 类添加到 $('#status').addClass("successCSS").text(data.message);并将其设置为黄色，将错误和成功都显示为黄色。
@Hutch - 只需检查响应中是否存在参数errormessage 或message 并设置正确的类。此外，您刚刚更新了您的问题，使其与第一个问题完全不同。 不要那样做。如果您还有其他问题，请将其写为另一个问题。这个答案回答了你的第一个问题。不要移动球门柱。

【解决方案2】：

你能改变你的 php 输出吗？样式会更容易，而且您不需要更改前端代码，请尝试添加一个类而不是纯 CSS。

【讨论】：