javascript - operator - ¿Cómo escribir este operador ternario con jQuery?

operadores logicos javascript

Question

En este fiddle http://jsfiddle.net/mjmitche/6nar4/3/ , si arrastra, por ejemplo, el pequeño cuadro azul al cuadro amarillo, el cuadro negro grande se volverá rosa. Todos los 4 cuadros a lo largo de la izquierda se pueden arrastrar a los cuadros dentro del cuadro negro.

Al final del violín, verá el código que cambia el cuadro negro a rosa.

Sin embargo, quiero que sea un operador ternario, de modo que si la caja es negra, luego se vuelva rosa, pero si se ha vuelto rosa, entonces quiero que vuelva a negro.

Sé que el ternario es así.

x ? y: z

Así que intenté esto, aunque sabía que probablemente no estaba bien.

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

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

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

Creo que la primera línea antes del signo de interrogación está causando el problema, entonces, ¿cómo crear la sentencia if ?

Answer 1

Además, el operador ternario espera expresiones, no declaraciones. No utilice puntos y coma, solo al final de la operación ternaria.

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

Answer 2

Como otros han señalado correctamente, la primera parte del ternario debe devolver true o false y, en su pregunta, el valor de retorno es un objeto jQuery.

El problema que puede tener en la comparación es que el color de la web se convertirá a RGB, por lo que tendrá que enviar un texto para eso en la condición ternaria.

Así que con el CSS:

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

El siguiente jQuery cambiará el color:

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

Demo

Answer 3

Creo que Dan y Nicola tienen un código corregido adecuado, sin embargo, puede que no tengas claro por qué el código original no funcionó.

Lo que se ha llamado aquí "operador ternario" se denomina operador condicional en la sección 11.12 de ECMA-262. Tiene la forma:

LogicalORExpression ? AssignmentExpression : AssignmentExpression

Se evalúa LogicalORExpression y el valor devuelto se convierte en booleano (como una expresión en una condición if). Si se evalúa como verdadero, entonces se evalúa la primera AssignmentExpression y se devuelve el valor devuelto; de lo contrario, se evalúa y devuelve el segundo.

El error en el código original son los puntos y coma adicionales que cambian el intento del operador condicional en una serie de declaraciones con errores de sintaxis.

Answer 4

El operador ternario funciona porque la primera parte de él devuelve un valor booleano. En su caso, el método css de jQuery devuelve el objeto jQuery, por lo que no es válido para la operación ternaria.

Answer 5

El operador ternario se escribe como una expresión booleana seguida de un signo de interrogación y luego dos expresiones separadas por dos puntos.

Lo primero que puedo ver es que se equivocó, es que su primera expresión no está devolviendo un valor booleano o algo sensato que se pueda convertir en un valor booleano. Su primera expresión siempre devolverá un objeto jQuery que no tiene una interpretación sensata como booleana y a lo que se convierte es probablemente una interpretación invariable. Siempre es mejor devolver algo que tenga una interpretación booleana bien conocida, si no otra cosa más por legibilidad.

Lo segundo es que estás poniendo un punto y coma después de cada una de tus expresiones, lo que está mal. En efecto, esto significa "fin de construcción" y también lo es romper su operador ternario.

En esta situación, aunque probablemente pueda hacerlo de una manera más fácil. Si usas clases y el método toggleClass, puedes obtenerlo fácilmente para activar y desactivar una clase y luego puedes poner tus estilos en esa definición de clase (Kudos a @yoavmatchulsky por sugerir el uso de clases en los comentarios).

Se puede encontrar un problema de esto aquí: http://jsfiddle.net/chrisvenus/wSMnV/ (basado en el original)

Answer 6

Por lo que parece que estás tratando de hacer, la toggle podría resolver mejor tu problema.

EDITAR: Lo siento, alternar es solo visibilidad, no creo que ayude a cambiar su color bg.

Pero aquí tienes:

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

Answer 7

Yo haría (agregado caché):

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

violín de trabajo (nuevo OTRA VEZ): http://jsfiddle.net/6nar4/37/

Tuve que cambiar el primer operador ya que css() devuelve el valor rgb del color

Answer 8

Yo iría con tal código:

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

Para que funcione, primero debe cambiar su CSS y eliminar el background de la declaración de #blackbox , agregue esas dos clases:

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

Y asigna la clase bg_black al elemento de la blackbox inicialmente.

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

En mi opinión, es más legible que las otras respuestas, pero depende de usted elegir, por supuesto.