ifステートメントの背景色を確認してください

Question

私はifステートメントを2つの条件で使用しています。何らかの理由で、背景色を赤色に変更し、黒色に変更しません。

$(".circles").click(function() { 
    counter++; 
    if (counter % 2 === 0 && $(this).css("background-color")=="#FFFFFF") { 
     $(this).css("background-color", "black"); 
    } else { 
     $(this).css("background-color", "red"); 
    } 
}) 

.circlesはもともと#FFFFFFに設定されています。 どうしたのですか？

Answer 1

はおそらくあなたにrgb色をお返ししますが、それは確かではありません。

var whiteColor = $('<div/>').css({ 
 
    backgroundColor: '#fff' 
 
}).css('backgroundColor'); 
 
var counter = 0; 
 
$(".circles").click(function() { 
 
    counter++; 
 
    if (counter % 2 === 0 && $(this).css("background-color") == whiteColor) { 
 
     $(this).css("background-color", "black"); 
 
    } else { 
 
     $(this).css("background-color", "red"); 
 
    } 
 
})

.circles { 
 
    background-color: #FFFFFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circles" style="background-color: #fff;"> 
 
    Click me 
 
</div>

クレジットthis answerに：あなたは、白い背景を持つ要素を作成し、そのプロパティを取得するよりも、確認したい場合。

this Fiddleでも。

Answer 2

Iは、コールの実際の結果を記録しようとした：

$(this).css("background-color") 

結果（Chromeで）したrgb(255,255,255)したがって、それは文字列"#FFFFFF"異なります。

またcounterとの問題は、それが奇数だときに、赤に背景色を設定し、それは背景色が赤である偶数だとき[rgb(255,0,0)を返す]ひいてはそれが"#FFFFFF"は異なるということです。

ここにはFiddleがあります。

私は試合の異なる種類を使用して、あなたをお勧めしたい。..たとえば、あなたはクリックで授業を切り替えるとbackground-color

を変更するために追加されたクラスセレクタを使用することができますクラスを使用する代わりに$(this).css(..) == "a color string"IF条件の内側ことを意味あなたの商品が最初に持っている.whiteクラスを作成することができます。クリックされたとき、それは.whiteクラスを持っている場合、あなたは彼らがそれ故に、

クラスは、あなたのCSSファイルにbackground-colorを変更するように設定されている（クラス名は一例であり、あなたが望むようにちょうどそれらに名前を付ける）別のクラス.redを使用して、その色を変更するよりも、 「のようなものができるでしょう：あなたはcss("background-color")メソッドを使用している場合、ブラウザ

.white{ 
    background-color: #FFFFFF 
} 

.red{ 
    background-color: #FF0000 
}