Überprüfen Hintergrundfarbe in if-Anweisung

Question

Ich habe eine if Anweisung mit 2 Bedingungen. Aus irgendeinem Grund ändert sich die Hintergrundfarbe zu rot und niemals zu schwarz.

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

Die .circles auf #FFFFFF ursprünglich gesetzt. Was ist los?

Answer 1

Der Browser wahrscheinlich Sie geben zurück rgb Farbe, wenn Sie css("background-color") Methode verwenden, aber das ist nicht sicher. Wenn Sie sicher sein wollen, als mit weißen Hintergrund ein Element erstellen und nutzen Sie seine Eigenschaft:

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>

Credits this answer.

Auch auf this Fiddle.

Answer 2

Ich habe versucht, das tatsächliche Ergebnis des Aufrufs zu protokollieren:

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

Das Ergebnis (auf Chrome) war: rgb(255,255,255) damit es aus dem String "#FFFFFF" unterscheidet.

Auch das Problem mit dem counter ist, dass, wenn es eine ungerade Zahl ist Sie die Hintergrundfarbe auf rot gesetzt, wenn es der Hintergrund-Farbe Rot eine gerade Zahl ist, ist [Rückkehr rgb(255,0,0)] und somit ist es anders aus "#FFFFFF".

Hier ist ein Fiddle.

Ich würde Ihnen vorschlagen, eine andere Art von Spiel mit .. Sie zum Beispiel Klassen auf Klick und nutzen den zusätzlichen Klassen Wähler wechseln konnte die background-color

Verwendung Klassen statt $(this).css(..) == "a color string" innerhalb der IF Zustand zu verändern bedeutet, dass Sie können eine .white Klasse erstellen, die Ihr Artikel am Anfang hat. Wenn Sie darauf klicken, wenn es .white Klasse hat, als Sie seine Farbe eine andere Klasse mit ändern .red (Klassennamen sind Beispiele, nur um sie nennen, wie Sie wollen)

Die Klassen nur die background-color in Ihrer CSS-Datei ändern, damit festgelegt werden sie ‚ll so etwas wie:

.white{ 
    background-color: #FFFFFF 
} 

.red{ 
    background-color: #FF0000 
}