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

Question

我正在为 table 中的所有单元格设置背景颜色。在 table 中只有数字数据。下面的代码有效。设置大于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

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

这个有效：

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

试一试：

function alertit(value) {
    var variable = (value >10 ? 'green' : (value <5 ? 'red' :'orange' ));
    alert(variable);
}

alertit(document.getElementsByTagName('input')[0].value)

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

Answer 2

如果嵌套 inline if:

，请始终使用括号

.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)})

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

Ternary Expression within Ternary Expression JavaScript

javascript

inline

ternary-operator

conditional-operator