关于javascript：jQuery if / else语句不起作用


jQuery if/else statements not working

jQuery的新手，我不明白为什么这小段代码无法正常工作。我将主体的背景设置为黑色，但始终返回else语句，并且背景变为橙色而不是所需的粉红色。

1
2
3
4
5
6
7
8
9
$(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/

相关讨论

您不能只要求复合的CSS样式，例如" background"；该值返回为空字符串。要求"背景色"。 (编辑Firefox给了我空字符串；其他浏览器可能会为您构造整个组合的背景属性。)

现在，一旦解决了这个问题，您将发现报告的颜色不会是"黑色"。这将是其他表示"黑色"的颜色语法。

使用类代替：

，而不是依靠样式机制来跟踪正在发生的事情

1
2
3
4
5
$("body").addClass("black");
if ($("body").hasClass("black"))
  $("body").addClass("pink");
else
  $("body").addClass("orange");

然后在您的CSS中：

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

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

相关讨论

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

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

如果只想检查颜色，则需要指定想要的color属性，并针对它实际使用的值进行测试，而不是实际要测试rgb颜色值，而不是" black"：

1
if ($('body').css("background-color") =="rgb(0, 0, 0)")
相关讨论

修复很简单。 $("body").css("background-color","black") !=="black"。相反，它等于rgb(0, 0, 0)。在CSS中，"black"不是纯色。而是将其转换为rgb()颜色。要修复它：

1
2
3
4
5
6
7
8
9
10
$(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");
    }
});

小提琴

相关讨论