Question

所以我试图制作一个简单的小Jquery函数，当你点击它时会改变身体的背景颜色。单击正文时，如果是红色，则将其更改为橙色，否则，将其更改为红色。

我的代码（是的，我知道在一个页面上使用我的脚本，css和html的问题，但这只是我代码的这一方面的测试基础。）

<!DOCTYPE html>
<html>
<head>
    <style>
        body {background-color: red}
    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("body").on("click",(function(){
    var color = $("body").css("background-color")

        if (color == rgb(255,0,0)){
          $("body").css("background-color",    rgb(255,165,0) );
      }
      else{
        $("body").css("background-color",   rgb(255,0,0) );
      }


  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>Some Text</p>
<p>Around</p>
<p>Here<p>
<p>Yep.</p>
</body>
</html>

Answer 1

尝试更改：

var color = $("body").val("background-color")

要：

var color = $("body").css("background-color");

Answer 2

.val()不会返回元素的css属性。 .css('style-name')将获得该传递样式的值。请阅读here以了解有关.css（）的更多信息。

尝试，

$(document).ready(function(){
  $("body").click(function(){
    var color = $("body").css("background-color")   
        if (color == "red"){
            $("body").css("background-color", "orange" );
      }
      else{
        $("body").css("background-color", "red" );
      }
  });
});

Answer 3

错误在这一行：

var color = $("body").val("background-color")

.val() method主要用于获取表单元素的值，例如input，select和textarea。

要获取样式属性的值，请使用.css() method：

var color = $("body").css("background-color")

另一个错误是.css()方法接受字符串颜色为"red"和"orange"，但它返回rgb颜色代码"rgb(255, 255, 255)"，因此您应该使用颜色的rgb表示测试身体背景颜色。

$(document).ready(function(){
  $("body").click(function(){
    var orange="rgb(255, 165, 0)";
    var red="rgb(255, 0, 0)";
    var color = $("body").css("background-color")   
    if (color == red){
       $("body").css("background-color", orange );
    }
    else{
       $("body").css("background-color", red );
    }
  });
});

Answer 4

尝试：

  $(function(){
    $("body").click(function(){
        $(this).css("background-color", function(_, val){
            return val === "rgb(255, 0, 0)" ? "rgb(255,165,0)" : "rgb(255, 0, 0)";
        });
    });
  });

<强> Demo

颜色将以RGB格式解释，因此您实际上需要对其进行测试而不是颜色的文本表示（如红色，蓝色等）。

According to Docs

如果值是半透明的，则计算出的值将是rgba（）对应的值。如果不是，它将是rgb（）对应的一个。 transparent关键字映射到rgb（0,0,0）。

请记住，当您使用.css时，它会为元素添加内联样式，您可以切换类以解决处理RGB格式的问题。

CSS：

body{background-color:red;}
body.orange {background-color:orange;}

JS：

 $(function(){
  $("body").click(function(){
    $(this).toggleClass('orange');
  });
 });

<强> Demo

Here is an SO answer将为您提供所有颜色转换

尝试在点击时使用Jquery更改html的背景颜色

4 个答案: