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的内容，它会返回不同的背景颜色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组件等重用。

你如何处理条件html格式化？

1 个答案: