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

Question

在这个 fiddle 中 http://jsfiddle.net/mjmitche/6nar4/3/ ，例如，如果您将蓝色小框拖入黄色框，那么黑色大框就会变成粉红色。左边的所有 4 个框都可以拖到黑框内的框内。

在 fiddle 的末尾，您会看到将黑框更改为粉红色的代码。

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

我知道三元组是这样的

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 并从 #blackbox 声明中删除 background，添加这两个类:

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

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

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

在我看来，它比其他答案更具可读性，但当然取决于您的选择。