Классы условных элементов с jinja, я хочу, чтобы div получал класс, если элемент списка содержит определенный элемент - PullRequest
2 голосов
/ 06 апреля 2019

Я делаю небольшую доску объявлений, и у меня есть маленькие карточки для каждой работы.Эти карты создаются динамически из списка, отправленного из моего сценария на языке python в html с использованием flask / jinja

jobs = [{'title':'fix car', 'description':'my car broke down', 'price':100}]

Пример HTML

{% for item in jobs %}

<p> {{ item['title'] }} {{ item['description'] }} {{ item['price'] }} </p>

{% endfor %}

Screenshot of job tasks

Мне бы хотелось, чтобы выделенные карты выделялись или выделялись.Поэтому в моем скрипте Python, откуда берутся задания, я добавил двоичную опцию.1 = признак, 0 = нормальный

Так что в моем html это выглядело бы примерно так:

{% for item in jobs %}

<p class='featured if item['featured']'> {{ item['title'] }} {{ item['description'] }} {{ item['price'] }}

{% endfor %}

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

Пример CSS

.featured {
    background-color: blue;
}

1 Ответ

1 голос
/ 06 апреля 2019

Вы можете использовать условное выражение для более короткого результата:

<p class='{{"featured" if item["featured"] else "normal"}}'> {{ item['title'] }} {{ item['description'] }} {{ item['price'] }}</p>

Однако, если вы не хотите включать класс для неучтенных карт, можно использовать общий оператор if - else:

{%if item["featured"]%}
  <p class='featured'> {{ item['title'] }} {{ item['description'] }} {{ item['price'] }}</p>
{%else%}
  <p> {{ item['title'] }} {{ item['description'] }} {{ item['price'] }}</p>
{%endif%}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...