Comment écrire cet opérateur ternaire avec jQuery?
dans ce violon http://jsfiddle.net/mjmitche/6nar4/3/, Si vous glissez, par exemple, la petite boîte bleue dans la boîte jaune, alors la grande boîte noire deviendra 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.
cependant, je veux faire que l'opérateur ternaire, de sorte que si la boîte est noire, alors il tourne rose, mais si elle est je veux que ça redevienne rose, puis que ça redevienne noir.
je sais que le ternaire est comme ceci
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 le if déclaration?
8 réponses
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);
pour que cela fonctionne, vous devez d'abord changer votre CSS et supprimer le background#blackbox déclaration, ajoutez-les en deux classes:
.bg_black { background-color: #000; }
.bg_pink { background-color: pink; }
et assignez la classe bg_blackblackbox élément initialement.
mise à Jour de 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.
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 css() retourne la valeur rvb de la couleur
je pense que Dan et Nicola ont corrigé le code, mais vous ne savez peut-être pas pourquoi le code original n'a pas fonctionné.
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
l'expression LogicalORExpression est évaluée et la valeur retournée convertie en booléen (comme une expression dans une condition si). Si elle est évaluée à true, alors la première AssignmentExpression est évaluée et la valeur retournée est retournée, sinon la seconde est évaluée et retournée.
l'erreur dans le code original est les semi-colonnes supplémentaires qui changent l'opérateur conditionnel tenté en une série d'énoncés avec des erreurs de syntaxe.
l'opérateur ternaire est simplement écrit comme une expression booléenne suivie d'un questionmark puis de deux autres expressions séparées par deux points.
la première chose que je peux voir que vous vous êtes trompé est que votre première expression ne renvoie pas un booléen ou quelque chose de sensé qui pourrait être converti en booléen. Votre première expression va toujours retourner un objet jQuery qui n'a pas d'interprétation sensée comme un booléen et ce qu'il convertit en est probablement un immuable interprétation. Vous êtes toujours mieux de retourner quelque chose qui a une interprétation booléenne bien connue, si rien d'autre pour le bien de la lisibilité.
la deuxième chose est que vous mettez un point-virgule après chacune de vos expressions qui est fausse. En effet, cela signifie "fin de la construction" et donc briser votre opérateur ternaire.
dans cette situation, mais vous pouvez probablement faire cela d'une manière plus facile. Si vous utilisez les classes et la méthode toggleClass ensuite, vous pouvez facilement l'obtenir pour allumer et éteindre une classe et ensuite vous pouvez mettre vos styles dans cette définition de classe (Bravo à @yoavmatchulsky pour avoir suggéré 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)
l'opérateur ternaire fonctionne parce que 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.
à Partir de ce qu'il semble que vous essayez de faire, bascule pourrait 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 de basculement.
Mais ici, vous allez:
var box = $("#blackbox");
box.css('background') == 'pink' ? box.css({'background':'black'}) : box.css({'background':'pink'});
En outre, l'opérateur ternaire attend des expressions, pas des déclarations. N'utilisez pas de point-virgule, seulement à la fin de l'opération ternaire.
$("#blackbox").css({'background':
$("#blackbox").css('background') === 'pink' ? 'black' : 'pink'});
comme d'autres l'ont fait remarquer à juste titre, la première partie du ternaire doit 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 de la toile sera converti en RVB, donc vous devez envoyer un texte pour cela dans la condition ternaire.
Donc avec le CSS:
#blackbox {
background:pink;
width:10px;
height:10px;
}
le jQuery suivant retournera le couleur:
var b = $('#blackbox');
b.css('background', (b.css('backgroundColor') === 'rgb(255, 192, 203)' ? 'black' : 'pink'));