Question

我正在为表格中的所有单元格设置背景颜色。表中只有数字数据。以下代码有效。它将数字背景设置为大于10到绿色，低于或等于10到红色。

.css({'background-color': value > 10 ? 'green' : 'red'})

但是当想要设置三种不同颜色作为背景时，我不知道如何正确地将它放入JavaScript中。我想在三元表达式中使用三元表达式。下面的代码应该接近解决方案。我想将数字的背景设置为大于10到绿色，然后从5到红色。 5到10之间的数字应该是橙色背景。

.css({'background-color': value > 10 ? 'green' : 'background-color' : value < 5 ? 'red' : 'orange'})

代码有什么问题？

Answer 1

如果嵌套内联：

，请始终使用括号

.css({'background-color': (value > 10 ? 'green' : (value < 5 ? 'red' : 'orange'))})

您应该将代码重构为另一个函数，以避免if-else地狱，并保持代码清洁：

function valueToColor(value) {
  if(value > 10) return 'green';
  if(value >= 5) return 'orange';
  return 'red';
  // equivalent to: return (value > 10 ? 'green' : (value < 5 ? 'red' : 'orange'))
}

// ...

.css({'background-color': valueToColor(value)})

Answer 2

我的建议是用变量取出代码。它不起作用，因为您没有对三元条件语句和重复的{background-color}键进行分组。

这有效：

var variable = (value >10 ? 'green' : (value <5 ? 'red' :'orange' ));
.css({'background-color': variable})

试一试：

＆＃13;

function alertit(value) {
    var variable = (value >10 ? 'green' : (value <5 ? 'red' :'orange' ));
    alert(variable);
}

alertit(document.getElementsByTagName('input')[0].value)

＆＃13;

Change value: <input type="text" value="3" onchange="alertit(this.value)">

＆＃13;

三元表达式JavaScript中的三元表达式

2 个答案: