如何在 jQuery 中编写三元运算符条件？

Question

在这个小提琴http://jsfiddle.net/mjmitche/6nar4/3/中，如果你把蓝色的小盒子拖到黄色的盒子里，那么黑色的大盒子就会变成粉红色。 左边的4个盒子都可以拖到黑盒子里面的盒子里。

在小提琴结束时，您会看到将黑框更改为粉红色的代码。

但是，我想让它成为一个三元运算符，这样如果盒子是黑色的，那么它就会变成粉红色，但是如果它变成了粉红色，那么我想让它 go 变回黑色。

我知道三元是这样的

x ? y: z

所以我尝试了这个，即使我知道这可能不对

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

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

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

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

Answer 1

我会用这样的代码 go ：

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

要让它工作，你首先必须改变你的 CSS 并从#blackbox声明中删除background ，添加这两个类：

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

并最初将 class bg_black分配给blackbox元素。

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

在我看来，它比其他答案更具可读性，但当然由你来选择。

Answer 2

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

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

LogicalORExpression ? AssignmentExpression : AssignmentExpression

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

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

Answer 3

我会做（添加缓存）：

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

工作小提琴（再次新）： http://jsfiddle.net/6nar4/37/

我必须更改第一个运算符，因为css()返回颜色的 rgb 值

Answer 4

三元运算符只是写成一个 boolean 表达式，后跟一个问号，然后是两个用冒号分隔的表达式。

我可以看到您弄错的第一件事是您的第一个表达式没有返回 boolean 或任何可以转换为 boolean 的合理内容。 你的第一个表达式总是会返回一个 jQuery object ，它没有作为 boolean 的合理解释，它转换成的可能是一个不变的解释。 为了便于阅读，最好还是返回具有众所周知的 boolean 解释的东西，如果没有其他的话。

第二件事是您在每个错误的表达式后都放了一个分号。 实际上，这是在说“构造结束”，因此破坏了您的三元运算符。

在这种情况下，尽管您可能可以更简单地做到这一点。 如果您使用类和 toggleClass 方法，那么您可以轻松地使用它来打开和关闭 class，然后您可以将 styles 放入 class 定义中（感谢 @yoavmatch.sky 的定义）

在这里可以找到一个小提琴： http://jsfiddle.net/chrisvenus/wSMnV/ （基于原版）

Answer 5

三元运算符有效，因为它的第一部分返回 Boolean 值。 在您的情况下，jQuery 的 css 方法返回 jQuery object，因此对三元运算无效。

Answer 6

从您正在尝试做的事情来看，切换可能会更好地解决您的问题。

编辑：抱歉，切换只是可见性，我认为它不会帮助您切换背景颜色。

但在这里你 go：

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

Answer 7

这是 function 中的一个工作示例：

 function setCurrency(){ var returnCurrent; $("#RequestCurrencyType").is(":checked") === true? returnCurrent = 'Dollar': returnCurrent = 'Euro'; return returnCurrent; }

在你的情况下。 更改选择器和返回值

 $("#blackbox").css('background-color') === 'pink'? return "black": return "pink";

最后，要知道浏览器使用的值是什么，请在控制台中运行以下命令：

 $("#blackbox").css('background-color')

并使用“rgb(xxx.xxx.xxx)”值而不是 Hex 进行颜色选择。

Answer 8

此外，三元运算符需要表达式，而不是语句。 不要使用分号，只在三元运算的末尾。

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

Answer 9

正如其他人正确指出的那样，三元的第一部分需要返回true或false ，在您的问题中，返回值是 jQuery object。

您在比较中可能遇到的问题是web 颜色将转换为 RGB，因此您必须在三元条件下输入文本。

所以对于 CSS：

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

以下 jQuery 将翻转颜色：

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

演示