在 jinja2 模板中使用 bootstrap/javascript 更改变量值颜色答案

【问题标题】：Change variable value color with bootstrap/javascript in jinja2 templating在 jinja2 模板中使用 bootstrap/javascript 更改变量值颜色
【发布时间】：2018-01-18 13:14:14
【问题描述】：

我有一个要求，我必须以不同的颜色显示（打开、进行中、重新打开、已解决、已关闭。）Jira 状态。下面的工作现在

{% set state = 'Closed' %}
{% if state =='Open' %}
    <p class="text-primary">{{ state }}</p>
{% elif state =='Closed' %}
    <p class="text-danger">{{state }}</p>
{% endif %}

除了上述之外，还有其他方法吗？我听说bootstrap可以做到这一点？如果我使用上面的代码，我必须在我的代码中至少写 20 次。所以我需要一个可以在 HTML 中使用的脚本，我可以在其中执行 status('state') 并且它应该像魔术一样工作。

【问题讨论】：

标签： javascript html jinja2 bootstrap-4

【解决方案1】：

是的，您可以将 Bootstrap 用于 CSS。 https://getbootstrap.com/docs/4.0/utilities/colors/

您可以利用 JavaScript 来呈现 HTML。

<script>

function setState(state) {
    let setClass;
    switch(state) {
        case 'Open':
            setClass = 'text-primary'
        break;
        case 'Closed':
            setClass = 'text-danger'
        break;
        default:
            setClass = 'text-dark'
    }
    return '<p class="'+setClass+'">'+state+'</p>';
}

// Usage:
setState('Open')

</script>

【讨论】：

谢谢。这对我不起作用。当我尝试这个时，它会打印 setState('Open')
确保您始终在 JavaScript 周围使用 <script> open 和 </script> close 标签。我将编辑答案以反映使用情况。
setState('open') 必须在脚本标签内吗？我直接在我的 div 中使用。