web-dev-qa-db-fra.com

Comment écrire cet opérateur ternaire avec 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, la grande boîte noire deviendra rose. Toutes les 4 cases situées à gauche peuvent être glissées dans les cases situées à l'intérieur de la case noire. 

À la fin du violon, vous voyez le code qui change la case noire en rose.

Cependant, je veux que ce soit un opérateur ternaire, de sorte que si la boîte est noire, elle deviendra rose, mais si elle est devenue rose, je souhaite qu’elle redevienne noire. 

Je sais que le ternaire est comme ça

x ? y: z

Alors j'ai essayé, même si je savais que ce n'était probablement pas juste

$("#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, alors comment créer l'instruction if? 

javascriptjqueryternary
31
Leahcim

Je voudrais aller avec un tel code:

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

Pour que cela fonctionne, vous devez d'abord changer votre CSS et supprimer la background de la déclaration #blackbox, ajoutez ces deux classes:

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

Et affectez la classe bg_black à l'élément blackbox initialement.

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

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

58
Shadow Wizard

Je pense que Dan et Nicola ont un code corrigé approprié, mais vous ne savez peut-être pas pourquoi le code original n'a pas fonctionné.

Ce qui a été appelé ici un "opérateur ternaire" est appelé un opérateur conditionnel dans la section 11.12 de la norme ECMA-262. Il a la forme:

LogicalORExpression ? AssignmentExpression : AssignmentExpression

L'expression LogicalORExpression est évaluée et la valeur renvoyée convertie en booléen (tout comme une expression dans une condition if). S'il vaut true, alors la première AssignmentExpression est évaluée et la valeur renvoyée est renvoyée, sinon la seconde est évaluée et renvoyée.

L'erreur dans le code d'origine correspond aux points-virgules supplémentaires qui modifient l'opérateur conditionnel tenté en une série d'instructions avec des erreurs de syntaxe. 

4
RobG

Je ferais (mise en cache ajoutée):

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

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

Je devais changer le premier opérateur car css() renvoie la valeur en RVB de la couleur

4
Nicola Peluchetti

L'opérateur ternaire est simplement écrit sous la forme d'une expression booléenne suivie d'un point d'interrogation, suivi de deux autres expressions séparées par un signe deux-points.

La première chose que je peux voir avec laquelle vous vous êtes trompé est que votre première expression ne retourne pas un booléen ou quelque chose de sensé pouvant être converti en booléen. Votre première expression retournera toujours un objet jQuery qui n'a pas d'interprétation sensible en tant que booléen et dont la conversion est probablement une interprétation immuable. Vous êtes toujours mieux de retourner quelque chose qui a une interprétation booléenne bien connue, si ce n’est rien d’autre pour la lisibilité.

La deuxième chose est que vous mettez un point-virgule après chacune de vos expressions ce qui est faux. En réalité, cela signifie "fin de construction" et donc, casser votre opérateur ternaire.

Dans cette situation, vous pouvez probablement y parvenir plus facilement. Si vous utilisez des classes et la méthode toggleClass, vous pouvez facilement le faire pour activer ou désactiver une classe, puis vous pouvez placer vos styles dans cette définition de classe (félicitations à @yoavmatchulsky pour avoir suggéré d'utiliser des classes dans des commentaires).

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

2
Chris

L'opérateur ternaire fonctionne car la première partie renvoie une valeur booléenne. Dans votre cas, la méthode CSS de jQuery renvoie l'objet jQuery, donc non valide pour l'opération ternaire.

1
Saeed Neamati

D'après ce que vous essayez de faire, toggle pourrait mieux résoudre votre problème. 

EDIT: Désolé, le basculement n’est qu’une visibilité, je ne pense pas que cela aidera votre bascule couleur.

Mais voilà:

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

De plus, l'opérateur ternaire attend des expressions, pas des déclarations. N'utilisez pas de points-virgules, seulement à la fin de l'op. Ternaire.

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

Comme d'autres l'ont fait remarquer à juste titre, la première partie du ternaire doit renvoyer true ou false et, dans votre question, la valeur de retour est un objet jQuery.

Le problème que vous pouvez avoir dans la comparaison est que la couleur Web sera convertie en RVB, vous devez donc envoyer du texte pour cela dans la condition ternaire.

Donc avec le CSS:

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

Le jQuery suivant inversera la couleur:

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

Demo

0
andyb