jQuery if/else语句不工作

jQuery if/else statements not working

本文关键字：工作 语句 else if jQuery      更新时间：2023-09-26

对jQuery非常陌生，我不明白为什么这一小段代码不能工作。我将body的背景设置为黑色，但是我总是返回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/

你不能只要求像"background"这样的复合CSS样式;该值返回为空字符串。输入"background-color"。(编辑本;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; }

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

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

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

如果你只是想检查颜色，你需要指定你想要的颜色属性，并测试它实际使用的值，而不是"黑色"，你实际上想要测试rgb颜色值:

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

修复方法很简单。$("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");
    }
});
<标题>小提琴
相关文章：