更改可变文本颜色答案

【问题标题】：Change variable text colour更改可变文本颜色
【发布时间】：2019-06-02 10:32:33
【问题描述】：

我对此很陌生，如果我说得不对，请原谅我。

我正在调用一个提供火车服务状态的 API。它显示状态为“良好的服务、轻微的延误、暂停等）

我有它的工作，但我想要一个 if else 语句，说明如果服务良好，然后保持字体颜色不变，但其他任何 - 使它成为不同的颜色。下面是我的代码

var statuswaterloo = value.lineStatuses[0].statusSeverityDescription;
console.log(statuswaterloo);

$('.statuswaterloo').text(statuswaterloo);

if (statuswaterloo = "Good Service") {} 

else {
color: red;
}

【问题讨论】：

使用== 而不是=。 == 是 comparison operator，用于比较 2 个或多个值。而= 是Assignment operator，用于设置变量（例如x = 5）
您在 else 块中的语法也不完全正确。您需要按照$('.statuswaterloo').css('color', 'red'); 的方式做一些事情

标签： javascript html css variables if-statement

【解决方案1】：

您不需要 if else，而是使用否定比较或if not 语法。然后像这样使用!=

if (statuswaterloo != "Good Service") {
  $('.statuswaterloo').css('color', 'red')
}

【讨论】：

除非我遗漏了什么，否则我不确定语法是否正确。看起来他正在使用 jQuery，所以应该是 $('.statuswaterloo').css('color', 'red');

【解决方案2】：

您的代码几乎是正确的。主要问题只是小的语法问题。

这是您可以考虑的另一种更简单的方法。您可以保持代码的第一部分原样

$('.statusWaterloo:contains("Good Service")').css('color', 'green');
$('.statusWaterloo:contains("Severe Delays")').css('color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="statusWaterloo">Good Service</p>
<p class="statusWaterloo">Severe Delays</p>

看起来已经在使用 jQuery，所以您可以在选择器中使用 :contains，然后以这种方式更新样式。

【讨论】：

在此处使用“包含”可能会产生意想不到的副作用。您如何确定使用该类匹配器的项目中还包含什么？我认为最好寻找精确的字符串匹配，不是吗？例如，如果 div 包含“Not Good Service”怎么办，明白了！

【解决方案3】：

或者，您可以使用对象字面量将颜色分配给可能的状态。类似的东西（在你的标签中没有看到 jquery，所以只有 JS）。

(() => {
  // literal to assign color to status
  const serviceStates = {
      "Good Service": "green",
      "Minor Delays": "orange",
      "Severe Delays": "red",
      "Suspended": "grey"
  };
  const statusElement = document.querySelector(".statuswaterloo");
  // method to fill and colorize based on status
  const setStatus = (statusElem, status) => {
    statusElem.textContent = status;
    statusElem.style.color = serviceStates[status];
  }
  
  // demo for given states
  setStatus(statusElement, "Good Service");
  setTimeout(() => setStatus(statusElement, "Minor Delays"), 2000);
  setTimeout(() => setStatus(statusElement, "Severe Delays"), 4000);
  setTimeout(() => setStatus(statusElement, "Suspended"), 6000);
  
})();

&lt;p class="statuswaterloo"&gt;&lt;/p&gt;

【讨论】：