带有jinja的条件元素类,如果列表项包含某个项目,我想要一个div来获取一个类

Ari*_*Ari 5 html python jinja2 flask

我正在制作一个小工作板,每个工作都有一些卡片。这些卡片是使用 Flask/jinja 从我的 python 脚本发送到 html 的列表中动态创建的

jobs = [{'title':'fix car', 'description':'my car broke down', 'price':100}]
Run Code Online (Sandbox Code Playgroud)

HTML 示例

{% for item in jobs %}

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

{% endfor %}
Run Code Online (Sandbox Code Playgroud)

作业任务截图

我想要的是能够使选定的卡片脱颖而出,或成为特色。因此,在作业来自的 Python 脚本中,我添加了一个二进制选项。1 = 特色,0 = 正常

所以在我的 html 中,它看起来像这样:

{% for item in jobs %}

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

{% endfor %}
Run Code Online (Sandbox Code Playgroud)

所以如果它的 features 键设置为 1,它将获得一个新的 CSS 类。

CSS 示例

.featured {
    background-color: blue;
}
Run Code Online (Sandbox Code Playgroud)

Aja*_*234 5

您可以使用内联条件来缩短结果:

<p class='{{"featured" if item["featured"] else "normal"}}'> {{ item['title'] }} {{ item['description'] }} {{ item['price'] }}</p>
Run Code Online (Sandbox Code Playgroud)

但是,如果您不想为非特色卡片包含一个类,则可以使用通用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%}
Run Code Online (Sandbox Code Playgroud)