如何在Jinja2模板中用Bootstrap/JS实现Jira状态颜色动态显示？

绝对有更简洁的方法！你现在的Jinja2重复判断确实有点冗余，下面给你几个实用的方案，包括你想要的类似status('state')的便捷调用方式，还有贴合Bootstrap的实现：

方案1：用Jinja2宏（Macro）封装逻辑 #

既然你已经在使用Jinja2，最直接的优化就是把状态判断逻辑封装成宏，这样不用重复写一堆if-elif，调用起来超方便：

{% macro render_status(state) %}
  {% set status_classes = {
    'Open': 'text-primary',
    'In Progress': 'text-info',
    'Reopened': 'text-warning',
    'Resolved': 'text-success',
    'Closed': 'text-danger'
  } %}
  <p class="{{ status_classes.get(state, 'text-secondary') }}">{{ state }}</p>
{% endmacro %}

然后在模板里直接调用就行：

{{ render_status('Closed') }}
{{ render_status('In Progress') }}

这个方案完全在模板层面解决，不需要额外脚本，而且维护起来只需要修改status_classes字典就行，新增状态也很方便。

方案2：自定义JavaScript函数实现status('state')调用 #

如果你想通过HTML脚本的方式实现类似status('state')的调用，可以写一个简单的JS函数，动态生成带样式的状态元素：

<script>
function status(state) {
  const classMap = {
    'Open': 'text-primary',
    'In Progress': 'text-info',
    'Reopened': 'text-warning',
    'Resolved': 'text-success',
    'Closed': 'text-danger'
  };
  const className = classMap[state] || 'text-secondary';
  return `<p class="${className}">${state}</p>`;
}
</script>

然后在页面里可以这样用（如果是结合Jinja2渲染，直接把状态变量传进去）：

<script>
document.getElementById('status-container').innerHTML = status('{{ state }}');
</script>
<div id="status-container"></div>

或者如果是静态调用，直接写：

<div>
  <script>document.write(status('Closed'))</script>
</div>

方案3：结合Bootstrap Badge组件（更美观） #

如果你想贴合Bootstrap的组件风格，用Badge来显示状态会更专业，同样可以配合Jinja2或者JS实现：

用Jinja2映射类名： #

{% set badge_classes = {
  'Open': 'bg-primary',
  'In Progress': 'bg-info',
  'Reopened': 'bg-warning',
  'Resolved': 'bg-success',
  'Closed': 'bg-danger'
} %}
<span class="badge {{ badge_classes.get(state, 'bg-secondary') }}">{{ state }}</span>

用JS动态生成Badge： #

<script>
function renderStatusBadge(state) {
  const badgeClasses = {
    'Open': 'bg-primary',
    'In Progress': 'bg-info',
    'Reopened': 'bg-warning',
    'Resolved': 'bg-success',
    'Closed': 'bg-danger'
  };
  const className = badgeClasses[state] || 'bg-secondary';
  return `<span class="badge ${className}">${state}</span>`;
}
</script>

调用方式和之前的JS函数类似，这样显示的状态是Bootstrap自带的徽章样式，视觉效果更好。

推荐优先用方案1，因为完全在模板层处理，不需要依赖JS，而且符合你当前的技术栈；如果一定要用脚本方式，方案2或3都能满足你的需求。

内容的提问来源于stack exchange，提问作者Raj