37

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

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

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

我知道三元是这样的

x ? y: z

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

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

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

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

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

4

9 回答 9

70

我会使用这样的代码：

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/

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

于 2011-07-06T11:53:24.770 回答
5

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

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

LogicalORExpression ? AssignmentExpression : AssignmentExpression

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

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

于 2011-07-06T13:59:13.000 回答
4

我会做（添加缓存）：

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 值

于 2011-07-06T11:28:11.273 回答
2

三元运算符只是写为一个布尔表达式，后跟一个问号，然后是两个用冒号分隔的其他表达式。

我可以看到您弄错的第一件事是您的第一个表达式没有返回布尔值或任何可以转换为布尔值的合理值。您的第一个表达式总是会返回一个没有合理解释为布尔值的 jQuery 对象，并且它转换为的可能是不变的解释。为了便于阅读，最好还是返回具有众所周知的布尔解释的东西，如果没有别的东西的话。

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

在这种情况下，尽管您可能可以更简单地做到这一点。如果您使用类和 toggleClass 方法，那么您可以轻松地使用它来打开和关闭一个类，然后您可以将您的样式放入该类定义中（感谢 @yoavmatchulsky 建议在评论中使用类）。

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

于 2011-07-06T11:45:04.043 回答
1

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

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

但是给你：

var box = $("#blackbox");
box.css('background') == 'pink' ? box.css({'background':'black'}) : box.css({'background':'pink'});
于 2011-07-06T11:29:59.613 回答
1

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

于 2011-07-06T11:27:44.800 回答
0

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

$("#blackbox").css({'background': 
    $("#blackbox").css('background') === 'pink' ? 'black' : 'pink'});
于 2011-07-06T11:29:11.197 回答
0

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

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

演示

于 2011-07-06T13:02:46.990 回答
0

这是一个函数侧的工作示例：

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 进行颜色选择。

于 2019-08-12T13:07:29.247 回答