Question

当我想在收到ajax响应后通过jquery更改div元素的背景颜色时，我有一个问题，它不起作用。（代码经过验证，我通过在错误语句中输入测试行来测试它改变css属性，它工作。）这是代码：

#statusbox {
background-color: #FFFFFF;
width: 15px;
height: 15px;
display:inline-block;
float: left;
position:relative;
left:190px;
top:3px;
border-style: solid;
border-width: 2px;

border-color: black;

}

和jquery

success: function(msg) {
    if (msg['connected']) {
        $('#statusbox').css("background-color", "#00FF00");
    } else $('#statusbox').css("background-color", "#FF0000");
},
error: function(error_msg) {
    $('#statusbox').css("background-color", "#00FF00");
}

Answer 1

首先，您（在原始帖子中）有一个很小的CSS语法错误：

$.css({});接收包含CSS property => value属性的对象。

在您的情况下，您将00FF00分配给background-color，这将等于以下CSS定义：

CSS代码

#statusbox {
    background-color: 00FF00
}

您忘记了#，请使用：

Javascript代码

$('#statusbox').css("background-color", "#00FF00");

其次，$.ajax()成功处理程序的第一个参数是被称为脚本回显的HTML。

也就是说，如果您的PHP脚本执行此操作：

PHP代码

echo 'connected';

您可以通过以下方式检查：

Javascript代码

success: function(msg) {
    if (msg == 'connected') {
        $('#statusbox').css("background-color", "#00FF00");
    } else $('#statusbox').css("background-color", "#FF0000");
}

确保在实际的PHP代码之前或之后没有流氓空格，因为这也会得到回应;或者只是剥离空格：

Javascript代码

success: function(msg) {
    if (msg.replace(' ', '') == 'connected') {
        $('#statusbox').css("background-color", "#00FF00");
    } else $('#statusbox').css("background-color", "#FF0000");
}

Answer 2

你的代码中的一切都很好，只需在你下面的颜色代码之前使用＃

$('#statusbox').css("background-color","#00FF00");}

通过jquery更改.css背景颜色不起作用

2 个答案: