Изменить переменный цвет текста

Question

Я очень новичок в этом, так что прости меня, если я не говорю это правильно.

Я вызываю API, который дает статус поезда. Отображается статус «Хорошее обслуживание, незначительные задержки, приостановлено и т. Д.)

У меня это работает, но я хочу иметь оператор if else, который говорит, что если Good service, то оставьте цвет шрифта как есть, а любой другой - сделайте его другим цветом. Ниже код у меня есть

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

В качестве альтернативы вы можете использовать литерал объекта, чтобы назначать цвета для возможных состояний. Что-то вроде (не видел 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);
  
})();

<p class="statuswaterloo"></p>

Answer 3

Ваш код очень прав.Основной проблемой были просто небольшие синтаксические проблемы.

Вот альтернативный и более простой подход, который вы могли бы рассмотреть.Вы можете сохранить первую часть своего кода, как это

$('.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 в селекторе, а затем обновить стили таким образом.