Comment écrire opérateur ternaire condition en jQuery?

Dans ce violon http://jsfiddle.net/mjmitche/6nar4/3/, si vous faites glisser, par exemple, la petite boîte bleue dans la boîte jaune, puis la grosse boîte noire va virer au rose. Tous les 4 cases à gauche peuvent être glissés dans les boîtes à l'intérieur de la boîte noire.

À la fin du violon, vous voyez le code qui modifie la boîte noire de rose de.

Cependant, je tiens à en faire un opérateur ternaire, de sorte que, si la boîte est noire, alors il devient rose, mais si ça l'est est rose, alors je veux qu'il aille à nouveau le noir.

Je sais que le ternaire est comme ça

x ? y: z

J'ai donc essayé ce, même si je savais que ce n'était probablement pas droit

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

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

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

Je pense que la première ligne avant le point d'interrogation est à l'origine du problème, comment fait-on pour créer le if déclaration?

InformationsquelleAutor Leahcim | 2011-07-06
  1. 64

    Je voudrais aller avec ce code:

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

    D'avoir de travail, vous devez d'abord modifier votre CSS et retirer le background de la #blackbox déclaration, ajoutez-les en deux classes:

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

    Et assigner la classe bg_black à la blackbox élément initialement.

    Mis à jour jsFiddle: http://jsfiddle.net/6nar4/17/

    À mon avis c'est plus lisible que les autres réponses, mais c'est à vous de choisir, bien sûr.

    InformationsquelleAutor Shadow The Burning Wizard
  2. 4

    Je pense que Dan et Nicola ont un code corrigé, mais vous ne pouvez pas être clair sur les raisons de l'original code ne fonctionne pas.

    Ce que l'on appelle ici un "opérateur ternaire" est appelé un opérateur conditionnel dans ECMA-262 article 11.12. Il est de la forme:

    LogicalORExpression ? AssignmentExpression : AssignmentExpression

    La LogicalORExpression est évaluée et la valeur retournée converti en Booléen (tout comme une expression dans une condition if). Si elle est true, alors la première AssignmentExpression est évaluée et la valeur retournée est retourné, sinon la deuxième est évaluée et retourné.

    L'erreur dans le code d'origine est extra points-virgules qui changent la tentative d'opérateur conditionnel dans une série de déclarations avec des erreurs de syntaxe.

    InformationsquelleAutor RobG
  3. 4

    Je le ferais (ajouté au cache):

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

    wroking violon (nouveau): http://jsfiddle.net/6nar4/37/

    J'ai dû changer le premier opérateur comme css() renvoie la valeur rvb de la couleur

    • Merci. Dans le cadre de mon violon, est-il besoin de plus de crochets? Je ne peux pas le faire fonctionner? jsfiddle.net/mjmitche/6nar4/6
    • désolé, j'ai eu un type là-dedans, utilisez des virgules au lieu de ':' (en tout cas, votre violon a quelques problèmes sur firefox 5)
    • merci, mais dans votre violon, une fois que la boîte se transforme en rose, cela ne changera pas retour au noir. Savez-vous comment résoudre ce problème?
    • exactement comment voulez-vous qu'il fonctionne?Droit maintenant, il vérifie si la couleur de fond de la grande place est noir, s'il est noir, il se transforme en rose. voulez-vous vous ouvrez à nouveau le noir si c'est rose?
    • Certains characthers ai foiré désolé, ce n'est pas ma chance de poste. essayer jsfiddle.net/6nar4/37
    InformationsquelleAutor Nicola Peluchetti
  4. 2

    L'opérateur Ternaire est juste écrit comme une expression booléenne suivie par un questionmark et puis deux autres expressions séparées par une virgule.

    La première chose que je peux voir que vous avez mal, c'est que votre première expression n'est pas de retourner un booléen ou quelque chose de sensé qui pourrait être converti en une valeur booléenne. Votre première expression est toujours renvoyer un objet jQuery qui n'a pas d'interprétation sensée comme une valeur booléenne et ce qu'il ne convertir en est probablement une invariable interprétation. Vous êtes toujours mieux de retourner quelque chose qui a bien connu boolean interprétation, si nothign d'autre pour des raisons de lisibilité.

    La deuxième chose, c'est que vous mettez un point-virgule après chacune de vos expressions de ce qui est faux. En effet c'est de dire "fin de la construction" et est donc la rupture de votre opérateur ternaire.

    Dans cette situation si vous ne pouvez probablement faire un moyen plus facile. Si vous utilisez des classes et de la toggleClass méthode, alors vous pouvez facilement le faire pour passer d'une classe sur et en dehors et puis vous pouvez mettre vos styles dans cette définition de la classe (Bravo à @yoavmatchulsky pour ce qui suggère l'utilisation de classes là-haut dans les commentaires).

    Un violon de cela se trouve ici: http://jsfiddle.net/chrisvenus/wSMnV/ (basé sur l'original)

    • Mauvais pour la même raison, les autres le sont. L'expression n'a pas besoin de retourner la valeur true ou false - étape 3 de traitement d'un opérateur conditionnel (ECMA-262 11.12) est Call ToBoolean(Result(2)). Si le résultat était attendu pour être de type Boolean, il n'y aurait pas besoin d'appeler ToBoolean (une erreur serait probablement jeté).
    • même si elle n'est pas de type Booléen, il devrait être somethign qui peuvent être raisonnablement converti en booléen. La plupart des choses peut être converti en booléen, mais cela ne signifie pas qu'il est sage de le faire. Je dirais que dans ce contexte, un objet jQuery ne compte pas comme un booléen, car il n'y a pas de véritable moyen judicieux de dire si un objet jquery qui est vrai ou faux alors que si vous avez un entier ou une chaîne de texte il y a des choses sensibles qui peut être fait pour les convertir. Je vais modifier pour le rendre plus clair si.
    InformationsquelleAutor Chris
  5. 1

    Opérateur ternaire fonctionne parce que la première partie de elle renvoie une valeur Booléenne. Dans votre cas, jQuery css méthode retourne un objet jQuery, donc pas valable pour le ternaire de l'opération.

    • -1 parce que la première instruction est simplement faux, lire ECMA-262 article 11.12. Il ne fonctionne pas parce que des points-virgules.
    InformationsquelleAutor Saeed Neamati
  6. 1

    De ce qu'il semble que vous essayez de faire, bascule peut mieux résoudre votre problème.

    EDIT: Désolé, la bascule est juste de la visibilité, je ne pense pas que cela va aider votre bg couleur basculement.

    Mais ici, vous allez:

    var box = $("#blackbox");
box.css('background') == 'pink' ? box.css({'background':'black'}) : box.css({'background':'pink'});
    • o.k, j'ai qu'à l'intérieur de mon violon, mais ça ne marche pas, ai-je besoin de parenthèses jsfiddle.net/mjmitche/6nar4/7
    • Ouais, j'ai laissé un supplément de fermer les parenthèses là, fixe
    InformationsquelleAutor Dan
  7. 0

    Aussi, l'opérateur ternaire attend expressions, non pas des déclarations. Ne pas utiliser des points-virgules, seulement à la fin de l'ternaire op.

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

    Comme d'autres l'ont souligné à juste titre, la première partie de l'expression des besoins pour revenir true ou false et dans votre question, la valeur de retour est un objet jQuery.

    Le problème que vous pouvez avoir de la comparaison est que le couleur web seront convertis en RVB si vous avez le texte pour que, dans la condition ternaire.

    Donc, avec le CSS:

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

    La suite de jQuery va retourner la couleur:

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

    Démo

    InformationsquelleAutor andyb
  9. 0

    Voici un exemple de travail à côté d'une fonction:

    HTML:

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

    Dans votre cas. Changer le sélecteur et les valeurs de retour

    HTML:

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

    enfin, pour savoir quelle est la valeur utilisée par le navigateur exécuter la ligne suivante dans la console:

    HTML:

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

    et d'utiliser le "rgb(xxx.xxx.xxx)" valeur au lieu de l'hexagone pour la sélection de la couleur.

    InformationsquelleAutor Sergio Rodriguez