Wie überprüfe ich mit jQuery auf einen css-Wert?

Nachdem der Benutzer auf eine Tabellenzeile geklickt hat, möchte ich überprüfen, ob die Hintergrundfarbe der Tabellenzeile weiß ist. Ist dies der Fall, wird die Farbe in hellblau geändert.Wie überprüfe ich mit jQuery auf einen css-Wert?

Der Code, den ich verwende, funktioniert nicht. Hier ist es:

$("#tracker_table tr#master").click(function(){ 
    if($(this).css("background-color") == "#FFFFFF") { 
    $(this).css("background-color", "#C2DAEF"); 
    } 
});

Ich denke, es ist etwas falsch mit meiner if-Anweisung. Wie kann ich mit jQuery nach einem CSS-Wert suchen?

Quelle

2010-05-31 zeckdude

Sie vielleicht einen Blick auf dieses Blog [Vergleich Farben mit JavaScript] nehmen wollen (http://radio.javaranch.com/pascarello/2005/05 /19/1116513366466.html). Offenbar repräsentieren verschiedene Browser Farben anders oder taten es 2005. – R0MANARMY

Sieht aus wie es in der Form rgb(x, y, z), so sollten Sie den Code sein zurückgegeben wird:

$("#tracker_table tr#master").click(function(){ 
    if($(this).css("background-color") == "rgb(255, 255, 255)") { 
    $(this).css("background-color", "#C2DAEF"); 
    } 
});

bearbeiten: Davon abgesehen, würde ich vorschlagen, dass Sie Klassen verwenden, anstatt Inspektion/Einstellung CSS-Eigenschaften direkt . Etwas wie folgt aus:

$("#tracker_table tr#master").click(function(){ 
    if(!$(this).hasClass("selected")) { 
    $(this).addClass("selected"); 
    } 
});

Css:

tr { background-color: #FFFFFF; } 
tr.selected { background-color: #C2DAEF; }

Quelle

2010-05-31 03:30:48 Alconja

Das funktioniert immer noch nicht. Es ist etwas falsch mit meiner if-Anweisung, weil ich versucht habe, eine Warnung innerhalb der if-Anweisung hinzuzufügen, und es wurde nie alarmiert, so dass ich weiß, dass die if-Anweisung nicht korrekt funktioniert. – zeckdude

@zeckdude: In welchem Browser testeest du? Ich sehe kein Problem mit Ihrer if-Anweisung und das 'rgb (...)' -Format wird definitiv in Firefox & Webkit zurückgegeben, aber vielleicht hängt es vom Browser ab, wie @R0MANARMY in seinem Kommentar zu Ihnen sagt Frage (normalerweise versucht jQuery diese Cross-Browser-Seltsamkeiten zu verstecken) ... Ihr könnt meinen zweiten Vorschlag in der obigen Bearbeitung ausprobieren. – Alconja

Während dies funktionieren kann, in der Tat gibt es Informationen in Form von Farben speichern, und dann das Abrufen und Vergleichen dieser später Informationen. Alconja schlägt einen Ansatz vor, der funktionieren wird, aber letztendlich ist es vielleicht besser, mit Klassen zu arbeiten, deren Namen von Ihnen definiert werden können, um entsprechende Bedeutung zu tragen. Es ist viel freundlicher und weniger spröde, so etwas zu haben:

$('#tracker_table tr#master').click(function(){ 
    if ($(this).hasClass('something')) { 
     $(this).removeClass('something').addClass('something_else'); 
    } 
})

Quelle

2010-05-31 03:37:25

Dies ist wahrscheinlich der Weg zu gehen, ich nehme an, die Farben haben eine Art Bedeutung wie "ausgewählte Zeile" oder was nicht. – R0MANARMY

Was ist, wenn Ihre Projekt-Stakeholder entscheiden, dass Weiß nun auch bedeutet, dass sie es lieber hellgrau mögen? Nein, nicht so grau, noch grau. Und mach das Blau auch ein bisschen grüner. Die Verwendung von semantischen Klassennamen bedeutet eine einfache Änderung in Ihrem Stylesheet, und Ihr Code bedeutet weiterhin, was er sagt. Wenn es nur 'ausgewählt' ist, dann ja, das ist ziemlich einfach. tr class = "ausgewählt", im Gegensatz zu keiner Klasse. –

Wie überprüfe ich mit jQuery auf einen css-Wert?

Antwort

Verwandte Themen