Question

点击时，我正试图让绿色圆圈在红色和绿色之间交替显示。代码看起来很好，但它不起作用，所以一定是错的。我做的初学者错误是什么？

$("#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%;
}

Answer 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>

Answer 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>

Answer 3

css（＆＃34; background-color＆＃34;）方法不会返回样式属性中的实际值，而是返回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>

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

所以代码更清晰。

＆＃13;

logger.error(`GET on /history`, { err });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

只需添加此代码并将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 个答案: