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