Javascript 如何使用jQuery更改div background onclick

我想更改按钮所在的

div

的背景。现在一切都在同一时间发生变化，我知道原因，但我不知道如何让它们独立工作

当我在server1中按下“yes”按钮时，我希望服务器1的背景颜色为红色，当我再次按下按钮时，它必须再次为原始颜色。我不介意脚本是否完全不同，但我希望保留HTML

//var white=false
//颜色；
//$（“按钮，是”）。单击（函数（）{
//如果（白色=！白色）{
//bgcolor=$（this.css（'backgroundColor'）；
//$（this.css（“背景色”、“红色”）；
//}其他{
//$（this.css（“背景色”，bgcolor）；
//     }
// });
绿色变量=假
函数toggleStatus（）
{
如果（绿色=！绿色）
{
$（“#maindiv.serverstatus”）。每个（函数（）
{
$（this.css（“背景色”、“红色”）；
});
}
其他的
{
$（“#maindiv.serverstatus”）。每个（函数（）
{
$（this.css（“背景色”，“#639919”）；
});
}
};
//函数updateStatus（）{
//$（“#maindiv.serverstatus”）。每个（函数（）{
//$（this.css（“背景色”、“红色”）；
//     });
// }
//
//$（文档）.ready（函数（）{
//更新状态（）；
// });

格拉菲克
服务器统计数据
（服务器名称1）
地位：


上次检查：
最后联机：
对
（服务器名2）
地位：


上次检查：
最后联机：
对
（服务器名3）
地位：


上次检查：
最后联机：
对
我不确定我是否应该做你的家庭作业，但这里有一个（不是最佳的）解决方案。我也会改变你的HTML，但我让你决定

这会将所有设置为绿色，单击的设置为红色。还有更优雅的解决方案

function toggleStatus(e) {
    $("#maindiv .serverstatus").each(function ()
        {
            $(this).css("background-color", "#639919");
        });

    $(e).parent().parent().css("background-color", "#ff0000");
};

嗯，我不确定我是否应该做你的家庭作业，但这里有一个（不是最佳的）解决方案。我也会改变你的HTML，但我让你决定

这会将所有设置为绿色，单击的设置为红色。还有更优雅的解决方案

function toggleStatus(e) {
    $("#maindiv .serverstatus").each(function ()
        {
            $(this).css("background-color", "#639919");
        });

    $(e).parent().parent().css("background-color", "#ff0000");
};

我使用以下步骤更新了您的代码（仅将代码更改为使用解决方案，未进行清理和重构）：

toggleStatus
功能现在接受
server\u name
和
color\u name
两个参数
切换状态
更新功能定义以更改
传递的
服务器名称的背景色

再次单击时将其更改回的步骤（基于评论中的反馈）：

创建三个
css类
，使用您的颜色名称作为背景
同名颜色
更新
toggleStatus
函数以切换
color\u name

//var white=false
//颜色；
//$（“按钮，是”）。单击（函数（）{
//如果（白色=！白色）{
//bgcolor=$（this.css（'backgroundColor'）；
//$（this.css（“背景色”、“红色”）；
//}其他{
//$（this.css（“背景色”，bgcolor）；
//     }
// });
绿色变量=假
功能切换状态（服务器名称、颜色名称）
{
//$（“#”+服务器名称）.css（“背景色”，颜色名称）；
$（'#'+服务器名称）.toggleClass（颜色名称）；
};
//函数updateStatus（）{
//$（“#maindiv.serverstatus”）。每个（函数（）{
//$（this.css（“背景色”、“红色”）；
//     });
// }
//
//$（文档）.ready（函数（）{
//更新状态（）；
// });

格拉菲克
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}        
格林先生{
背景颜色：绿色；
}
服务器统计数据
（服务器名称1）
地位：


上次检查：
最后联机：
对
（服务器名2）
地位：


上次检查：
最后联机：
对
（服务器名3）
地位：


上次检查：
最后联机：
对
我使用以下步骤更新了您的代码（仅将代码更改为使用解决方案，未进行清理和重构）：

toggleStatus
功能现在接受
server\u name
和
color\u name
两个参数
切换状态
更新功能定义以更改
传递的
服务器名称的背景色

再次单击时将其更改回的步骤（基于评论中的反馈）：

创建三个
css类
，使用您的颜色名称作为背景
同名颜色
更新
toggleStatus
函数以切换
color\u name

//var white=false
//颜色；
//$（“按钮，是”）。单击（函数（）{
//如果（白色=！白色）{
//bgcolor=$（th