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

我会（添加缓存）：

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

wroking fiddle（new AGAIN）：http://jsfiddle.net/6nar4/37/

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

Answer 3

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

这里所谓的“三元运算符”在ECMA-262第11.12节中称为条件运算符。它的格式为：

LogicalORExpression ? AssignmentExpression : AssignmentExpression

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

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

Answer 4

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

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

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

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

这里有一个小提琴：http://jsfiddle.net/chrisvenus/wSMnV/（基于原文）

Answer 5

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

Answer 6

从你想要做的事情来看，toggle可能会更好地解决你的问题。

编辑：对不起，切换只是可见性，我认为它不会帮助你的bg颜色切换。

但是你走了：

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

Answer 7

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

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

Answer 8

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

您在比较中可能遇到的问题是web color将转换为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'));

Demo

Answer 9

在jquery中实现三元运算符的简单方法。

var  ptestName = $("#Test-type").data("kendoComboBox").text();
pTestName=(pTestName == "All Types") ? "All" : ptestName;

Answer 10

这是函数中的一个有效示例：

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）”值代替十六进制进行颜色选择。

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

10 个答案: