Wie schreibe ich eine ternäre Operatorbedingung in jQuery?

Lesezeit: 5 Minuten

Benutzer-Avatar
Leahcim

In dieser Geige http://jsfiddle.net/mjmitche/6nar4/3/, wenn Sie zum Beispiel das kleine blaue Kästchen in das gelbe Kästchen ziehen, dann wird das große schwarze Kästchen rosa. Alle 4 Kästchen auf der linken Seite können in die Kästchen innerhalb des schwarzen Kästchens gezogen werden.

Am Ende der Geige sehen Sie den Code, der die schwarze Box in Pink ändert.

Ich möchte das jedoch zu einem ternären Operator machen, so dass, wenn das Kästchen schwarz ist, es rosa wird, aber wenn es rosa geworden ist, dann möchte ich, dass es wieder schwarz wird.

Ich weiß, dass die Dreiheit so ist

x ? y: z

Also habe ich es versucht, obwohl ich wusste, dass es wahrscheinlich nicht richtig war

$("#blackbox").css({'background':'pink'}); ?

    $("#blackbox").css({'background':'black'}); : 

$("#blackbox").css({'background':'pink'}); 

Ich denke die erste Zeile vor dem Fragezeichen verursacht das Problem, also wie erstellt man das if Aussage?

Ich würde mit solchem ​​Code gehen:

var oBox = $("#blackbox");
var curClass = oBox.attr("class");
var newClass = (curClass == "bg_black") ? "bg_pink" : "bg_black";
oBox.removeClass().addClass(newClass);

Damit es funktioniert, müssen Sie zuerst Ihr CSS ändern und die entfernen background von dem #blackbox Deklaration, fügen Sie diese beiden Klassen hinzu:

.bg_black { background-color: #000; }
.bg_pink { background-color: pink; }

Und ordnen Sie die Klasse zu bg_black zum blackbox Element zunächst.

jsFiddle aktualisiert: http://jsfiddle.net/6nar4/17/

Meiner Meinung nach ist es lesbarer als die anderen Antworten, aber es liegt natürlich an Ihnen, zu wählen.

Ich denke, Dan und Nicola haben einen geeigneten korrigierten Code, aber Sie sind sich möglicherweise nicht darüber im Klaren, warum der ursprüngliche Code nicht funktioniert hat.

Was hier als “ternärer Operator” bezeichnet wurde, wird in ECMA-262 Abschnitt 11.12 als bedingter Operator bezeichnet. Es hat die Form:

LogicalORExpression ? AssignmentExpression : AssignmentExpression

Der LogicalORE-Ausdruck wird ausgewertet und der zurückgegebene Wert in einen booleschen Wert konvertiert (genau wie ein Ausdruck in einer if-Bedingung). Wenn es als wahr ausgewertet wird, wird der erste AssignmentExpression ausgewertet und der zurückgegebene Wert zurückgegeben, andernfalls wird der zweite ausgewertet und zurückgegeben.

Der Fehler im Originalcode sind die zusätzlichen Semikolons, die den versuchten Bedingungsoperator in eine Reihe von Anweisungen mit Syntaxfehlern umwandeln.

Benutzer-Avatar
Nicola Peluchetti

Ich würde tun (hinzugefügtes Caching):

var bbx = $("#blackbox");
 bbx.css('background-color') === 'rgb(255, 192, 203)' ? bbx.css('background','black') : bbx.css('background','pink')

Arbeitsgeige (wieder neu): http://jsfiddle.net/6nar4/37/

Ich musste den ersten Operator als ändern css() gibt den RGB-Wert der Farbe zurück

  • Vielen Dank. Braucht es im Zusammenhang mit meiner Geige zusätzliche Klammern? Ich bekomme es nicht zum Laufen? jsfiddle.net/mjmitche/6nar4/6

    – Leahcim

    6. Juli 2011 um 11:31 Uhr

  • Entschuldigung, ich hatte einen Typ drin, verwenden Sie Kommas anstelle von ‘:’ (auf jeden Fall hat Ihre Geige einige Probleme mit Firefox 5)

    – Nicola Peluchetti

    6. Juli 2011 um 11:34 Uhr


  • Danke, aber in Ihrer Geige, sobald die Box rosa wird, wird sie nicht wieder schwarz. Weißt du, wie man es repariert?

    – Leahcim

    6. Juli 2011 um 11:54 Uhr

  • Wie genau soll es funktionieren? Im Moment prüft es, ob die Hintergrundfarbe des großen Quadrats schwarz ist, wenn es schwarz ist, wandelt es es in rosa um. Möchten Sie, dass es wieder schwarz wird, wenn es rosa ist?

    – Nicola Peluchetti

    6. Juli 2011 um 12:34 Uhr

  • Einige Charaktere wurden durcheinander gebracht. Tut mir leid, das ist nicht mein Glücksposten. Versuch es jsfiddle.net/6nar4/37

    – Nicola Peluchetti

    6. Juli 2011 um 13:15 Uhr

Benutzer-Avatar
Chris

Der ternäre Operator wird einfach als boolescher Ausdruck geschrieben, gefolgt von einem Fragezeichen und zwei weiteren Ausdrücken, die durch einen Doppelpunkt getrennt sind.

Das erste, was ich sehen kann, dass Sie sich geirrt haben, ist, dass Ihr erster Ausdruck keinen booleschen Wert oder irgendetwas Vernünftiges zurückgibt, das in einen booleschen Wert konvertiert werden könnte. Ihr erster Ausdruck wird immer ein jQuery-Objekt zurückgeben, das keine vernünftige Interpretation als boolescher Wert hat, und was es konvertiert, ist wahrscheinlich eine unveränderliche Interpretation. Am besten geben Sie immer etwas zurück, das eine bekannte boolesche Interpretation hat, wenn auch sonst nichts aus Gründen der Lesbarkeit.

Die zweite Sache ist, dass Sie nach jedem Ihrer Ausdrücke ein Semikolon setzen, was falsch ist. In der Tat bedeutet dies “Ende des Konstrukts” und bricht damit Ihren ternären Operator.

In dieser Situation können Sie dies wahrscheinlich einfacher tun. Wenn Sie Klassen und die toggleClass-Methode verwenden, können Sie damit problemlos eine Klasse ein- und ausschalten und dann Ihre Stile in diese Klassendefinition einfügen (ein dickes Lob an @yoavmatchulsky für den Vorschlag, Klassen dort oben in den Kommentaren zu verwenden).

Eine Geige davon findet sich hier: http://jsfiddle.net/chrisvenus/wSMnV/ (basierend auf dem Original)

Der ternäre Operator funktioniert, weil der erste Teil davon einen booleschen Wert zurückgibt. In Ihrem Fall gibt die CSS-Methode von jQuery das jQuery-Objekt zurück und ist daher für den ternären Betrieb nicht gültig.

  • -1 weil die erste Aussage einfach falsch ist, lesen Sie ECMA-262 Abschnitt 11.12. Wegen der Semikolons funktioniert es nicht.

    – RobG

    6. Juli 2011 um 13:41 Uhr

So wie es aussieht, versuchst du, Umschalten könnte dein Problem besser lösen.

BEARBEITEN: Tut mir leid, Umschalten ist nur Sichtbarkeit, ich glaube nicht, dass es beim Umschalten der BG-Farbe helfen wird.

Aber los geht’s:

var box = $("#blackbox");
box.css('background') == 'pink' ? box.css({'background':'black'}) : box.css({'background':'pink'}); 

  • -1 weil die erste Aussage einfach falsch ist, lesen Sie ECMA-262 Abschnitt 11.12. Wegen der Semikolons funktioniert es nicht.

    – RobG

    6. Juli 2011 um 13:41 Uhr

Außerdem erwartet der ternäre Operator Ausdrücke, keine Anweisungen. Verwenden Sie keine Semikolons, nur am Ende der ternären Operation.

$("#blackbox").css({'background': 
    $("#blackbox").css('background') === 'pink' ? 'black' : 'pink'});

1227940cookie-checkWie schreibe ich eine ternäre Operatorbedingung in jQuery?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy