javascript - jQuery if/else 语句不起作用

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; }

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