Как отследить динамическое, загружаемое из базы данных, текстовое значение в html элементе с помощью Javascript или Jquery?

Question

[Danny13]

С помощью PHP функции создается множество карт, в которых в каждой из них есть такая строка:

echo "<h4 class=\"card-title mb-0 card-small-text\"> ". $row['status'] . "</h4>\n";

. $row['status'] . грузит текстовое значение из базы данных либо как "сделано" либо как "не сделано".

Суть в том, что я хочу с помощью javascript или jquery отследить слова "сделано" или "не сделано" в этом h4 поле в html и в зависимости от статуса добавлять css к этому полю (поменять цвет).

Вот мой псевдокод для этого:

/* здесь я cсоздаю новую переменную и нахожу это поле через css класс во всех картах, что есть в таблице */
var findStatus = document.getElementsByClassName("card-title mb-0 card-small-text");
/* здесь я ищу слово "сделано" в поле и приравниваю его переменной */
var status = findStatus.includes("cделано");
/* здесь псевдокод (нормальный код как вы поняли не хватает ума написать поэтому прошу помощи) */
$(document).ready(function () {
/* если в . $row['status'] . подгружается текст "сделано", то....*/
   if (status == findStatus.includes("cделано") {
/* ....то карта получает зеленый цвет....*/
      $('.card_color').addClass("green-color");
  } else {
/* если в . $row['status'] . подгружается текст "не сделано", то карта получает красный цвет....*/
    $('.card_color').addClass("red-color");
  }
});

Comments

[Fenion]

Не проще в этой самой PHP функции добавить класс в зависимости от статуса?

$class = $row["status"] == "Сделано" ? "green-color" : "red-color";
echo "<h4 class=\"card-title ".$class." mb-0 card-small-text\"> ". $row['status'] . "</h4>\n";

[Danny13]

Спасибо! Вы гений :)