如何用jQuery编写这个三元运算符？

Question

在这种小提琴http://jsfiddle.net/mjmitche/6nar4/3/,如果拖动,例如,小蓝盒子放到黄色盒子,那么大的黑盒子会变成粉红色.左侧的所有4个方框都可以拖入黑匣子内的方框中.

在小提琴的末尾,您会看到将黑盒子改为粉红色的代码.

但是,我想把它变成一个三元运算符,这样如果盒子是黑色的,那么它会变成粉红色,但如果它变成粉红色,那么我希望它变回黑色.

我知道三元组是这样的

x ? y: z

所以我尝试了这个,尽管我知道这可能不对

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

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

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

我认为问号前的第一行是导致问题的,那么如何创建if语句呢？

Answer 1

我会使用这样的代码:

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

要让它工作,首先必须更改CSS并background从#blackbox声明中删除,添加这两个类:

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

并分配类bg_black到blackbox最初的元素.

更新了jsFiddle:http://jsfiddle.net/6nar4/17/

在我看来,它比其他答案更具可读性,但是你可以选择当然.

Answer 2

我认为 Dan 和 Nicola 有合适的更正代码，但是您可能不清楚为什么原始代码不起作用。

在 ECMA-262 第 11.12 节中，这里称为“三元运算符”的内容称为条件运算符。它具有以下形式：

LogicalORExpression ? AssignmentExpression : AssignmentExpression

计算 LogicalORExpression 并将返回值转换为布尔值（就像 if 条件中的表达式一样）。如果计算结果为真，则计算第一个 AssignmentExpression 并返回返回值，否则计算并返回第二个。

原始代码中的错误是额外的分号将尝试的条件运算符更改为一系列具有语法错误的语句。