Javascript jQuery读取的CSS与jQuery设置的CSS不对应

在按下按钮时，我想根据是否“选中”更改按钮的颜色和背景色，我正在通过读取当前颜色来检查该按钮

目前，jQuery读取的CSS值似乎没有被jQuery用来更新CSS的函数更新

这里有一个JSFIDLE演示了这个问题

功能切换按钮（按钮）{
让css={
“选中”：{
“背景色”：“609”，
“颜色”：“fff”
},
“未检查”：{
“背景色”：“ccc”，
“颜色”：“222”
}
}
css（“颜色”，“#222”）？
css（css.checked）：
css（css.unchecked）
}

按钮{
背景色：#ccc；
颜色：#222；
}

单击“我”

您的第一个问题是，您在if条件下使用了

css（）

的setter。因为它返回一个jQuery对象，所以它总是等于true

第二个问题是，即使在更正（

button.css（'color'）=='#222'

）时，

css（）

方法也会返回RGB格式的颜色，因此将其与十六进制值进行比较总是

false

要解决此问题，请在元素上切换一个类。使用不引人注目的事件处理程序而不是过时的*事件处理程序也是更好的做法。这还有一个额外的好处，就是将CSS和JS代码解耦。试试这个：

$（“按钮”）。单击（函数（）{
$（this.toggleClass（'foo'）；
});
按钮{
背景色：#ccc；
颜色：#222；
}
button.foo{
背景色：#609；
颜色：#fff；
}

点击我这个
按钮。css（“color”，“222”）
不会神奇地对照
“#222”
检查当前的
颜色
值，并返回
true
/
false
：根据@Andreas所说的，这不是检查元素颜色的正确方法：@Andreas哇，我觉得很愚蠢。我不知道我是怎么想的。谢谢