检查if语句中的背景颜色

我有一个带有2个条件的if语句。 由于某种原因，它将背景颜色更改为红色，永不变为黑色。

 $(".circles").click(function() { counter++; if (counter % 2 === 0 && $(this).css("background-color")=="#FFFFFF") { $(this).css("background-color", "black"); } else { $(this).css("background-color", "red"); } }) 

.circles最初设置为#FFFFFF 。 怎么了？

Answer 1

如果你使用css("background-color")方法，浏览器可能会给你回rgb颜色，但这不是肯定的。 如果你想确定，那么创建一个带有白色背景的元素并获得它的属性：

 var whiteColor = $('
').css({ backgroundColor: '#fff' }).css('backgroundColor'); var counter = 0; $(".circles").click(function() { counter++; if (counter % 2 === 0 && $(this).css("background-color") == whiteColor) { $(this).css("background-color", "black"); } else { $(this).css("background-color", "red"); } }) 

 .circles { background-color: #FFFFFF; } 

  
 Click me  

Answer 2

我试着记录通话的实际结果：

 $(this).css("background-color") 

结果（在Chrome上）是： rgb(255,255,255)因此它与字符串"#FFFFFF" 。

此外， counter的问题是，当它是一个奇数时，你将背景颜色设置为红色，当它是偶数时，背景颜色是红色[返回rgb(255,0,0) ]，因此它与"#FFFFFF" 。

这是一个小提琴 。

我建议你使用不同类型的匹配…例如你可以在点击时切换类并使用添加的类选择器来改变background-color

在IF条件中使用类而不是$(this).css(..) == "a color string"意味着您可以在开始时创建项目具有的.white类。 单击时，如果它具有.white类，则使用另一个类.white更改其颜色。（类名是示例，只需根据需要命名）

这些类设置为仅更改CSS文件中的background-color ，因此它们将类似于：

 .white{ background-color: #FFFFFF } .red{ background-color: #FF0000 }