if else语句Jquery帮助简单
[英]If else statement Jquery help simple
问题描述
I'm having trouble making my else statement work. 
我无法使我的else语句正常工作。 I want to change the background color from red to blue if the background color is red, if the background color is blue I want to change it to red. 如果背景颜色为红色，我想将背景颜色从红色更改为蓝色，如果背景颜色为蓝色，我想将其更改为红色。 I cannot see why the code below is not working, can anybody help? 我看不到下面的代码为什么不起作用，有人可以帮忙吗？
$(".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>
2 个解决方案
解决方案1
2 2016-01-12 08:10:01
The problem is your if condition, the .css() method which when used in setter format returns the jQuery object which is alsways truthy that is why the else part is not executed. 问题是您的if条件， .css()方法，该方法以setter格式使用时，始终返回jQuery对象，这就是为什么else部分未执行的原因。
If you want to compare the background-color then you need to use the getter version of .css() like if($(".box").css('background-color') == 'red') , but the value of color properties returned by the browser will depend on the browser(Some browser may return the rgb value of the hexa value) so comparing it may not always work. 如果要比较background-color则需要使用.css()的getter版本，例如if($(".box").css('background-color') == 'red') ，但是浏览器返回的颜色属性的值将取决于浏览器（某些浏览器可能返回hexa值的rgb值），因此进行比较可能并不总是可行。
One easy solution here is to use css classes to style the elements and toggle them use toggleClass() , in the below snippet we assigns the background color red to the box class, then the clicked class overrides the color to blue then we uses toggleClass to add/remove the class on click of the element. 一个简单的解决方案是使用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>
解决方案2
0 2016-01-12 08:10:56
just check the value of css property background-color 只需检查css属性background-color的值
var color = $(".box").css( "background-color" );
here is the complete code 这是完整的代码
$(".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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.