Wie schreibt ternär Zustand in jQuery?

In diesem fiddle http://jsfiddle.net/mjmitche/6nar4/3/, wenn Sie ziehen, zum Beispiel, die kleine Blaue box in der gelben box, dann in dem großen schwarzen Feld wird rosa. Alle 4 Boxen auf der linken gezogen werden können, in die Kästen im inneren der black box.

Ende der Geige, sehen Sie den code, änderungen der black-box in rosa.

Aber ich wollen, dass ein ternärer operator, so dass, wenn das Feld schwarz ist, dann dreht er sich rosa, aber falls es sich erst rosa, dann will ich ihn wieder schwarz.

Ich weiß, das ternär ist, wie dies

x ? y: z

Also versuchte ich dies, obwohl ich wusste, es war nicht wahrscheinlich Recht

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

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

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

Denke ich, die erste Zeile vor das Fragezeichen, das das problem verursacht, so wie die if Aussage?

InformationsquelleAutor Leahcim | 2011-07-06
  1. 63

    Ich würde mit solchen code:

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

    Arbeiten zu lassen, müssen Sie zuerst ändern Sie Ihre CSS und entfernen Sie die background von der #blackbox Erklärung, fügen Sie diese zwei-Klassen:

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

    Und weisen Sie die Klasse bg_black zu den blackbox element zunächst.

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

    Meiner Meinung nach ist es besser lesbar ist als die anderen Antworten, aber es ist bis zu Ihnen zu wählen, natürlich.

    InformationsquelleAutor Shadow Wizard
  2. 4

    Denke ich, dass Dan und Nicola haben geeignet korrigierte code, jedoch können Sie nicht klar werden, warum der ursprüngliche code hat nicht funktioniert.

    Was genannt wurde, hier ein "ternärer operator" genannt wird, eine bedingte operator in ECMA-262 Abschnitt 11.12. Es hat die form:

    LogicalORExpression ? AssignmentExpression : AssignmentExpression

    Den LogicalORExpression ausgewertet wird und der Rückgabewert in Boolean umgewandelt (wie ein Ausdruck in einer if-Bedingung). Wenn es zu true ausgewertet, dann wird die erste AssignmentExpression ausgewertet und der berechnete Wert zurückgegeben, andernfalls der zweite wird ausgewertet und zurückgegeben.

    Den Fehler im original-code ist die zusätzliche semi-colons, die versuchten bedingte operator in einer Reihe von Anweisungen mit syntax-Fehler.

    InformationsquelleAutor RobG
  3. 4

    Ich tun würde (Hinzugefügt caching):

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

    wroking Geige (neu): http://jsfiddle.net/6nar4/37/

    Musste ich die ersten Betreiber als css() gibt den rgb-Wert der Farbe

    • Um Gottes Willen, bitte-cache, der jQuery-Objekt...
    • Danke. Im Rahmen meiner Geige, braucht es zusätzliche Klammern? Ich kann nicht damit es funktioniert? jsfiddle.net/mjmitche/6nar4/6
    • sorry, ich hatte ein Typ da ist, verwenden Sie Kommas anstelle von ':' (auf jeden Fall Ihre Geige hat einige Probleme auf firefox 5)
    • ich aktualisiert die fiddle: jsfiddle.net/6nar4/11
    • danke, aber in deinem fiddle, einmal das Feld wird rosa, es wird nicht wieder ändern, um wieder schwarze zahlen. Wissen Sie, wie Sie es beheben?
    • wie genau willst du es zum arbeiten?Jetzt prüft Sie, ob die Hintergrundfarbe der große Platz ist schwarz, wenn es schwarz, dreht Sie es in rosa. wollen Sie es schalten Sie zurück zu schwarz, wenn es s rosa?
    • Ok, ich bearbeitet die fiddle: jsfiddle.net/6nar4/31
    • danke für den Versuch, aber es funktioniert nicht!
    • Einige characthers bekam versaut sorry, das ist nicht mein lucky post. versuchen Sie es jsfiddle.net/6nar4/37

    InformationsquelleAutor Nicola Peluchetti
  4. 2

    Ternäre operator ist nur so geschrieben, wie Sie eine boolean-Ausdruck gefolgt von einem questionmark und dann zwei weitere Ausdrücke, getrennt durch einen Doppelpunkt.

    Die erste Sache, die kann ich sehen, dass Sie haben falsch ist, dass Sie Ihre erste Ausdruck ist nicht die Rückkehr einer booleschen oder-nichts vernünftig, die umgewandelt werden kann, um einen booleschen Wert. Ihre erste Ausdruck ist immer wieder ein jQuery-Objekt, das hat keine sinnvolle interpretation als boolean und was es tut, zu konvertieren ist wohl eine unveränderliche interpretation. Sie sind immer am besten ab, die Rückkehr etwas, das hat eine bekannte Boolesche interpretation, wenn nothign sonst aus Gründen der besseren Lesbarkeit.

    Die zweite Sache ist, dass Sie setzen ein Semikolon nach jeder Ihrer Ausdrücke, was aber falsch ist. Im Effekt, das bedeutet: "Ende bauen", und so bricht Ihre ternärer operator.

    In dieser situation, obwohl Sie wahrscheinlich können dies tun, eine einfache Möglichkeit. Wenn Sie die Verwendung von Klassen und die Methode toggleClass dann können Sie leicht Sie diese Option, um eine Klasse auf und ab und dann können Sie Ihren Stil in dieser Klasse definition (Kudos @yoavmatchulsky für die Annahme, Verwendung von Klassen, die da oben in den Kommentaren).

    Einer Geige dieser ist hier zu finden: http://jsfiddle.net/chrisvenus/wSMnV/ (basierend auf dem original)

    • o.k., vielen Dank für diese
    • Falsch aus dem gleichen Grund die anderen sind. Der Ausdruck braucht nicht zu true oder false zurück - 3. Schritt der Verarbeitung eine bedingte operator (ECMA-262 11.12) ist Call ToBoolean(Result(2)). Wenn das Ergebnis war erwartet Boolean, gäbe es keine Notwendigkeit zu nennen, ToBoolean (ein Fehler würde wahrscheinlich geworfen werden).
    • auch wenn es nicht der Typ Boolean, sollte es somethign, die sein können sinnvoll in ein boolean. Die meisten Dinge, die kann konvertiert einen booleschen aber das bedeutet nicht, dass es sinnvoll ist, es zu tun. Ich würde sagen, dass in diesem Zusammenhang ein jQuery-Objekt zählt nicht als booleschen Wert, weil es keine wirkliche sinnvolle Weg, zu sagen, wenn ein jquery-Objekt ist true oder false in der Erwägung, dass, wenn Sie eine int-oder einen text-string es gibt sinnvolle Dinge, die getan werden können, zu konvertieren. Ich werde Bearbeiten, zu machen, dass klarer obwohl.
    InformationsquelleAutor Chris
  5. 1

    Ternären operator funktioniert, weil der erste Teil gibt einen booleschen Wert zurück. In Ihrem Fall, die jQuery-css-jQuery-Methode gibt das Objekt, also nicht gültig für ternäre operation.

    • 1, weil die erste Aussage ist schlicht falsch, Lesen ECMA-262 Abschnitt 11.12. Es funktioniert nicht, weil der semi-colons.
    InformationsquelleAutor Saeed Neamati
  6. 1

    Von dem, was es sieht aus wie Sie versuchen, zu tun, wechseln vielleicht besser lösen Ihr problem.

    EDIT: Sorry, Umschalten ist nur die Sichtbarkeit, ich glaube nicht, dass es helfen wird, Ihre Hintergrundfarbe Umschalten.

    Aber hier gehen Sie:

    var box = $("#blackbox");
box.css('background') == 'pink' ? box.css({'background':'black'}) : box.css({'background':'pink'});
    • o.k, ich habe in meinem fiddle, aber es funktioniert nicht, brauche ich zusätzliche Klammern jsfiddle.net/mjmitche/6nar4/7
    • Ja, ich habe ein extra enger Klammern dort fixiert
    InformationsquelleAutor Dan
  7. 0

    Auch der ternäre operator erwartet Ausdrücke, keine Anweisungen. Verwenden Sie keine Semikolons, nur am Ende der ternären op.

    $("#blackbox").css({'background': 
    $("#blackbox").css('background') === 'pink' ? 'black' : 'pink'});
    InformationsquelleAutor Karoly Horvath
  8. 0

    Als andere haben richtig darauf hingewiesen, dass der erste Teil der ternären muss zurück true oder false - und in deiner Frage der Rückgabewert ist ein jQuery-Objekt.

    Das problem, dass Sie haben können, in dem Vergleich ist, dass die web-Farbe werden in RGB konvertiert werden, so haben Sie den text für die, die in der ternären Zustand.

    So mit CSS:

    #blackbox {
    background:pink;
    width:10px;
    height:10px;
}

    Den folgenden jQuery blättert die Farbe:

    var b = $('#blackbox');
b.css('background', (b.css('backgroundColor') === 'rgb(255, 192, 203)' ? 'black' : 'pink'));

    Demo

    • Downvoting ohne Grund ist sinnlos.
    InformationsquelleAutor andyb
  9. 0

    Hier ist ein funktionierendes Beispiel in side eine Funktion:

    HTML:

    function setCurrency(){
   var returnCurrent;
   $("#RequestCurrencyType").is(":checked") === true ? returnCurrent = 'Dollar': returnCurrent = 'Euro';
   
   return returnCurrent;
}

    In Ihrem Fall. Ändern Sie den Selektor und die Rückgabewerte

    HTML:

    $("#blackbox").css('background-color') === 'pink' ? return "black" : return "pink";

    schließlich, zu wissen, was ist der Wert, auf den der browser führen Sie den folgenden in die Konsole ein:

    HTML:

    $("#blackbox").css('background-color')

    und verwenden Sie den "rgb(xxx.xxx.xxx)" - Wert anstelle des Hex für die Farbauswahl.

    InformationsquelleAutor Sergio Rodriguez
Schreibe einen Kommentar