Question

我对此很陌生，所以如果我说的不正确，请原谅我。

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

我可以使用它，但是我想有一个if if语句，说如果服务良好，则将字体颜色保持不变，但其他任何颜色-使其变为不同的颜色。下面是我的代码

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

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

if (statuswaterloo = "Good Service") {} 

else {
color: red;
}

Answer 1

如果不需要，则不需要，而使用负比较或if not语法。然后像这样使用!=

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

Answer 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，然后以这种方式更新样式。

Answer 3

或者，您可以使用对象文字来为可能的状态分配颜色。诸如此类（在您的代码中看不到jquery，所以只有JS）。

p paste
a paste
s paste
..
p/a paste
p/s paste
p/t paste
..
t/e paste
..
p/a/s paste
..
s/t/e paste

(() => {
  // 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);
  
})();

更改文字颜色

3 个答案: