这段代码缺少什么？答案

【问题标题】：What's missing from this code?这段代码缺少什么？
【发布时间】：2017-11-10 21:42:23
【问题描述】：

我正在尝试使绿色圆圈在单击时在红色和绿色之间交替。代码对我来说看起来不错，但它不起作用，所以一定有问题。我犯了什么初学者错误？

$("#greenCircle").click(function() {
  console.log($("#greenCircle").css("background-color"));
  if ($("#greenCircle").css("background-color") == "red") {
    $("#greenCircle").css("background-color", "green");
  } else {
    $("#greenCircle").css("background-color", "red");
  }
});

#greenCircle {
  background-color: green;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="greenCircle"></div>

我快疯了！我只是在做一个简单的 jQuery 动画，但它再次不起作用。一切看起来都是正确的。我什至甚至切换了文本编辑器，什么也没有。这是动画的代码。

<!DOCTYPE html>
<html>

<head>
    <title>JQuery</title>

    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jQuery Practice.css">

</head>
<body>
    hello

    <div id="circle"></div>

    <script type="text/javascript">

      $("#circle").click(function(){

         $("#circle").animate({Width:"400px"}, 2000); 

      });

    </script>

</body>

#circle{
width: 150px;
height: 150px;
background-color: green;
border-radius: 50%;
}

【问题讨论】：

你有什么行为？
IIRC，使用 css 获取颜色字段的值将返回 rgb() 格式的值，而不是“红色”或“绿色”。使用最有可能的课程来做到这一点会更容易

标签： jquery css function animation onclick

【解决方案1】：

由于 css 将以 rgb 格式返回颜色，因此使用可以打开/关闭的类将使这更容易。

$("#greenCircle").click(function() {
  $("#greenCircle").toggleClass('red');
});

#greenCircle {
  background-color: green;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

#greenCircle.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="greenCircle"></div>

【讨论】：

【解决方案2】：

$("#greenCircle").css("background-color") 返回解析后的颜色，如"rgb(0, 128, 0)"，不等于"red" 或"green"。

如果你使用一个类来设置颜色会更简单，那么你可以使用toggleClass()。

$("#circle").click(function() {
  $(this).toggleClass("greenCircle redCircle");
});

#circle {
  height: 150px;
  width: 150px;
  border-radius: 50%;
}
.greenCircle {
  background-color: green;
}
.redCircle {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle" class="greenCircle"></div>

【讨论】：

【解决方案3】：

如果您只想使用这种方法 - 颜色的计算值以 RGBa（红色、蓝色、绿色、Alpha - 表示不透明度）表示，而不是颜色名称（如红色、蓝色、橙色、透明等）或作为十六进制值。

$("#greenCircle").click(function() {
  if ($("#greenCircle").css("background-color") == 'rgb(255, 0, 0)') {
    $("#greenCircle").css("background-color", "green");
  } else {
    $("#greenCircle").css("background-color", "red");
  }
});

#greenCircle {
  background-color: green;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="greenCircle"></div>

【讨论】：

【解决方案4】：

这样代码就干净多了。

$("#greenCircle").click(function () {
   $(this).toggleClass("red");
});

#greenCircle {
  background-color: green;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

#greenCircle.red {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="greenCircle"></div>

【讨论】：

谢谢。我正在做一个 Udemy 教程，讲师采用了这种方法。这对他来说似乎工作正常。这真的让我很烦。当我需要使用它时，我会寻找一种替代方案。

【解决方案5】：

只需添加此代码并将 ID 更改为类

 $(".red").click(function() {
     $(this).toggleClass('greenCircle red');
 });

.greenCircle {
  background-color: green;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}
.red {
  background-color: #f00;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="red"></div>

【讨论】：

【解决方案6】：

css("background-color") 方法不会返回样式属性中的实际值，而是返回 rgb() 值。尝试使用 console.log 查看更改后值如何变化：

console.log($("#greenCircle").css("background-color"));

我可以建议一个更简单的替代方法吗：

<style>
   #circle {
   height: 150px;
   width: 150px;
   border-radius: 50%;
   }
   #circle.green{
   background-color: green;
   }
   #circle.red{
   background-color: red;
   }
</style>
<script>
   $("#circle").click(function(){
    $(this).toggleClass('red', 'green');
   });
</script>
<div id="circle" class="green"></div>

【讨论】：