解

Question

我看过最近的一篇类似的帖子，但答案没有用。我正在尝试制作一个Connect四游戏，基本上我的问题是每次我点击一个框就会改变颜色，但是如果我点击彩色框它也会改变为下一个颜色。如果它是红色或黄色，我希望每个盒子保持这种颜色。

 if ($(this).css('background-color') == $(this).css('background-color', 'silver'))

或

 if ($(this).css('background-color') != 'red') || (if ($(this).css('background-color')  !='yellow))

它只是跳过这个if语句？

Answer 1

对于您的第一个if语句，请更改：

if ($(this).css('background-color') == $(this).css('background-color', 'silver'))

要：

if ($(this).css('background-color') == 'silver')

调用$(this).css('background-color', 'silver'))会将该元素的background-color设置为白银，并尝试将其background-color与自身作为对象进行比较。

您的第二个if声明形成错误，无效。将其更改为：

if ($(this).css('background-color') != 'red' || $(this).css('background-color') !='yellow')

但请注意，这将始终为真，因为您询问背景是否为红色或背景不是黄色。如果背景为红色，则背景不会为黄色，反之亦然。将||更改为&&。

Answer 2

.css方法在不同的浏览器中有不同的输出：

$('<div>').css('background-color', 'red').css('background-color');

// Google Chrome
// "red"

// Mozilla Firefox
// "rgb(255, 0, 0)"

另一个例子：

$('<div>').css('background-color', 'rgba(0, 0, 0, 0)').css('background-color');

// Google Chrome
// "rgba(0, 0, 0, 0)"

// Mozilla Firefox
// "transparent"

解

Working FIDDLE Demo 的

创建一个对象，以便在所有可能的情况下存储所有颜色：

var colors = {
    'red'  : ['red'  , '#FF0000', '#ff0000', 'rgb(255, 0, 0)', 'rgba(255, 0, 0, 1)'],
    'green': ['green', '#00ff00', '#00FF00', 'rgb(0, 255, 0)', 'rgba(0, 255, 0, 1)']

    // etc
};

现在您可以使用$.inArray方法进行比较：

HTML

<div id="test1" style="background-color: red;">I am RED</div>
<div id="test2" style="background-color: blue;">I am Blue</div>

JS

// you want to see if `elem_color` is `red`
// just like this: elem_color == 'red'

var elem_color = $('#test1').css('background-color');

if ($.inArray(elem_color, colors['red']) > -1) {
    alert('Element is RED');
}

// you want to see if `elem_color` is not `green`
// just like this: elem_color != 'green'

var elem_color = $('#test2').css('background-color');

if (! ($.inArray(elem_color, colors['green']) > -1)) {
    alert('Element is not GREEN');
}

Answer 3

您使用＃FF0000还是正常的红色？如果您的红色是＃FF0001，则它不会将其识别为红色。

您需要使您的陈述与原始颜色完全相同，应该有效！

字符串匹配背景颜色值未评估为true

3 个答案:

解

HTML

JS