if else语句Jquery帮助简单

Question

我无法使我的else语句正常工作。 如果背景颜色为红色，我想将背景颜色从红色更改为蓝色，如果背景颜色为蓝色，我想将其更改为红色。 我看不到下面的代码为什么不起作用，有人可以帮忙吗？

  $(".box").css({ "background-color": "red" }); $(".box").click(function() { if ($(".box").css({ "background-color": "red" })) { $(".box").css({ "background-color": "blue" }); } else { $(".box").css({ "background-color": "red" }); } });

 .box { height: 100px; width: 100px; }

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div class="box"></div> </body> </html>

Answer 1

问题是您的if条件， .css()方法，该方法以setter格式使用时，始终返回jQuery对象，这就是为什么else部分未执行的原因。

如果要比较background-color则需要使用.css()的getter版本，例如if($(".box").css('background-color') == 'red') ，但是浏览器返回的颜色属性的值将取决于浏览器（某些浏览器可能返回hexa值的rgb值），因此进行比较可能并不总是可行。

一个简单的解决方案是使用css类来设置元素的样式，并使用toggleClass()对其进行切换，在下面的代码段中，我们将red的背景色分配给box类，然后clicked类将颜色覆盖为blue然后使用toggleClass来单击该元素即可添加/删除该类。

 $(".box").click(function() { $(this).toggleClass("clicked"); });

 .box { height: 100px; width: 100px; background-color: red; } .box.clicked { background-color: blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div class="box"></div>

Answer 2

只需检查css属性background-color的值

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

这是完整的代码

  $(".box").css({ "background-color": "red" }); $(".box").click(function() { var color = $(".box").css( "background-color" ); if ( color == "rgb(255, 0, 0)" ) { $(".box").css({ "background-color": "blue" }); } else { $(".box").css({ "background-color": "red" }); } });

 .box { height: 100px; width: 100px; }

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div class="box"></div> </body> </html>

if else语句Jquery帮助简单

问题描述

2 个解决方案

解决方案1
2 2016-01-12 08:10:01

解决方案2
0 2016-01-12 08:10:56

if else语句Jquery帮助简单

问题描述

2 个解决方案

解决方案1 2 2016-01-12 08:10:01

解决方案2 0 2016-01-12 08:10:56

解决方案1
2 2016-01-12 08:10:01

解决方案2
0 2016-01-12 08:10:56