fiddle

Question

jQuery非常新，我无法弄清楚为什么这一小段代码不起作用。我将身体的背景设置为黑色，但我总是使用else语句返回，并且我的背景变为橙色而不是所需的粉红色。

$(document).ready(function(){
    $("body").css("background","black");
        if ($("body").css("background") == "black") {
            $("body").css("background", "pink");
        }
        else {
            $("body").css("background", "orange");
        }
});

您可以在此处查看：http://jsfiddle.net/jH6Y9/1/

Answer 1

你不能只想要一个像“背景”这样的复合CSS风格;值返回为空字符串。要求“背景颜色”。（编辑 - Firefox为我提供了空字符串;其他浏览器可能会为您构建整个复合背景属性集。）

现在，一旦你越过那个问题，你会发现报告的颜色不会是“黑色”。它将是一些其他颜色语法，意思是“黑色”。

不要依赖样式机制来跟踪发生的事情，而是使用类来代替：

$("body").addClass("black");
if ($("body").hasClass("black"))
  $("body").addClass("pink");
else
  $("body").addClass("orange");

然后在你的CSS中：

body.black { background-color: black; }
body.pink { background-color: pink; }
body.orange { background-color: orange; }

更好的是，使用一些语义上有意义的名称作为页面状态而不是颜色名称，这样如果你以后改变主意并希望将背景从狗转换为小猫，代码仍然有意义

Answer 2

css'background'为您提供完整的背景参数，它看起来像：

"rgb(0,0,0) none repeat scroll..."

如果你只想检查颜色，你需要指定你想要颜色属性，并根据它实际使用的值测试它，而不是你实际想要测试rgb颜色值的“黑色”：

if ($('body').css("background-color") == "rgb(0, 0, 0)")

Answer 3

修复很简单。 $("body").css("background-color", "black") !== "black"。相反，它等于rgb(0, 0, 0)。在CSS中，"black"不是真正的颜色。相反，它会转换为rgb()颜色。解决它：

$(document).ready(function(){
    $("body").css("background-color","black");
    console.log($("body").css("background-color"))
    if ($("body").css("background-color") == "rgb(0, 0, 0)") {
        $("body").css("background-color", "pink");
    }
    else {
        $("body").css("background-color", "orange");
    }
});

jQuery if / else语句不起作用

3 个答案:

fiddle