三元表達式JavaScript中的三元表達式

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

試試吧：

 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)">