您如何处理条件html格式？

Question

在我的html页面之一中，我具有以下内容：

{% for bet in recent_bets %}
    {% if bet.status__name == "Won" or bet.status__name == "Half Won"%}
        <div class="container col recent-form_col bg-success"  data-toggle="tooltip" data-placement="top" title="{{ bet.date }}, {{ bet.time }}">
    {% elif bet.status__name == "Lost" or bet.status__name == "Half Lost"%}
        <div class="container col recent-form_col bg-danger" data-toggle="tooltip" data-placement="top" title="{{ bet.status }}">
    {% elif bet.status__name == "Void" or bet.status__name == "Cancelled"%}
         <div class="container col recent-form_col bg-secondary" data-toggle="tooltip" data-placement="top" title="{{ bet.status }}">
    {% elif bet.status__name == "Cash Out" %}
        <div class="container col recent-form_col bg-warning" data-toggle="tooltip" data-placement="top" title="{{ bet.status }}">
{% endif %}

根据bet.status__name是什么，它将返回不同的背景颜色ex bg-success 。

除了这种情况，我还有其他一些类似的情况。

我想知道你如何处理这些事情。 只需将其保留在html中，创建一个返回适当html或其他内容的过滤器/标签？

Answer 1

您绝对应该封装有关哪种状态导致哪种CSS类的逻辑。 您可以创建一个下注并返回正确的CSS类的过滤器：

<div class="container col recent-form_col bg-{{ bet|get_bet_css_class }}" data-toggle="tooltip" data-placement="top" title="{{ bet.date }}, {{ bet.time }}">

这样，您还可以将其与Bootstrap的alert组件等一起使用。