如何在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并将返回值转换为Boolean（就像if条件中的表达式一样）。如果计算结果为true，则计算第一个AssignmentExpression并返回返回的值，否则计算并返回第二个AssignmentExpression。

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

Answer 3

我做（添加缓存）：

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

工作小提琴（新AGAIN）：qazxsw poi

我必须更改第一个运算符，因为http://jsfiddle.net/6nar4/37/返回颜色的rgb值

Answer 4

Ternary运算符只是作为布尔表达式写入，后跟一个问号，然后是另外两个用冒号分隔的表达式。

我可以看到你出错的第一件事就是你的第一个表达式没有返回一个布尔值或任何可以转换为布尔值的合理表达式。你的第一个表达式总是返回一个jQuery对象，它没有合理的解释作为布尔值，它转换成的内容可能是一个不变的解释。你最好总是返回一个具有众所周知的布尔解释的东西，如果不是为了可读性而不是其他的。

第二件事是你在每个表达式之后放了一个分号是错误的。实际上这是说“结构的结束”，所以打破你的三元运算符。

在这种情况下，你可能会更容易地做到这一点。如果您使用类和toggleClass方法，那么您可以轻松地打开和关闭类，然后您可以将您的样式放在该类定义中（Kudos到@yoavmatchulsky建议在注释中使用类）。

这里有一个小提琴：css()（基于原文）

Answer 5

三元运算符可以工作，因为它的第一部分返回一个布尔值。在您的情况下，jQuery的css方法返回jQuery对象，因此对三元操作无效。

Answer 6

从你想要做的事情来看，http://jsfiddle.net/chrisvenus/wSMnV/可能会更好地解决你的问题。

编辑：对不起，切换只是可见性，我不认为这将有助于你的bg颜色切换。

但是你走了：

toggle

Answer 7

此外，三元运算符需要表达式而不是语句。不要使用分号，只能在三元操作结束时使用分号。

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

Answer 8

正如其他人正确指出的那样，三元组的第一部分需要返回

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

或true，在你的问题中，返回值是一个jQuery对象。

您在比较中可能遇到的问题是false将转换为RGB，因此您必须在三元条件下为其进行文本处理。

所以用CSS：

web color

以下jQuery将翻转颜色：

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

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