根据元素属性更改背景颜色的更好方法

Question

我正在开发一个使用 Django、一些 JavaScript 和 Tachyons 的项目。我在模板文件中有以下内容：

<tbody class="lh-copy">
    {% for alarm in alarm_list %}
        <tr>
            <td class="pv3 pr3 bb b--black-20 bg-light-green {{ alarm.id }}-td">{{ alarm.agent.name }}</td>
            <td class="pv3 pr3 bb b--black-20 bg-light-green {{ alarm.id }}-td">{{ alarm.profile_name }}</td>
            <td class="pv3 pr3 bb b--black-20 bg-light-green {{ alarm.id }}-td">{{ alarm.is_active }}</td>
            <td class="pv3 pr3 bb b--black-20 bg-light-green {{ alarm.id }}-td">{{ alarm.created }}</td>
            <td class="pv3 pr3 bb b--black-20 bg-light-green {{ alarm.id }}-td">{{ alarm.message }}</td>
            <td class="pv3 pr3 bb b--black-20 bg-light-green {{ alarm.id }}-td">{{ alarm.alrmtype }}</td>
            <td class="pv3 pr3 bb b--black-20 bg-light-green {{ alarm.id }}-td">{{ alarm.acknowledged }}</td>
            <td class="pv3 pr3 bb b--black-20 bg-light-green {{ alarm.id }}-td">{{ alarm.is_hidden }}</td>

            {% if alarm.is_active %}
                <script language="javascript">
                    const alarmValElementList{{ alarm.id }} = document.getElementsByClassName("{{ alarm.id }}-td");
                    for (let i=0; i < alarmValElementList{{ alarm.id }}.length; i ++) {
                        alarmValElementList{{ alarm.id }}[i].classList.remove("bg-light-green");
                        alarmValElementList{{ alarm.id }}[i].classList.add("bg-light-red");
                    };
                </script>
            {% endif %}
         </tr>
     {% endfor %}
 </tbody>

我正在从alarm_list 访问元素警报，并使用模板“if”插入JavaScript 代码，告诉HTML 元素删除当前背景颜色并添加另一种。我不乐意使用 alarmValeElementList{{ alarm.id }} 作为动态变量名，但我想不出其他方法。

有没有更好的方法来实现这个？

预计到达时间：

我认为这看起来更好，因为它摆脱了动态变量名称：

<script language="javascript">
    let alarmValElementList = [];
</script>
{% for alarm in alarm_list %}
    <tr>
        <td class="pv3 pr3 bb b--black-20 bg-light-green alarm-val-td">{{ alarm.agent.name }}</td>
        <td class="pv3 pr3 bb b--black-20 bg-light-green alarm-val-td">{{ alarm.profile_name }}</td>
        <td class="pv3 pr3 bb b--black-20 bg-light-green alarm-val-td">{{ alarm.is_active }}</td>
        <td class="pv3 pr3 bb b--black-20 bg-light-green alarm-val-td">{{ alarm.created }}</td>
        <td class="pv3 pr3 bb b--black-20 bg-light-green alarm-val-td">{{ alarm.message }}</td>
        <td class="pv3 pr3 bb b--black-20 bg-light-green alarm-val-td">{{ alarm.alrmtype }}</td>
        <td class="pv3 pr3 bb b--black-20 bg-light-green alarm-val-td">{{ alarm.acknowledged }}</td>
        <td class="pv3 pr3 bb b--black-20 bg-light-green alarm-val-td">{{ alarm.is_hidden }}</td>

        {% if alarm.is_active %}
            <script language="javascript">
                alarmValElementList = document.getElementsByClassName("alarm-val-td");
                for (let i=0; i < alarmValElementList.length; i ++) {
                    alarmValElementList[i].classList.remove("bg-light-green");
                    alarmValElementList[i].classList.add("bg-light-red");
                };
            </script>
        {% endif %}
    </tr>
{% endfor %}

但是，我想知道是否有更好的方法可以做到这一点？

Answer 1

我可能会遗漏您正在尝试做的其他事情，但这会起作用吗？

{% for alarm in alarm_list %}
<tr>
    <td class="pv3 pr3 bb b--black-20 {% if alarm.is_active %}bg-light-red{% else %} bg-light-green{% endif %} alarm-val-td">{{ alarm.agent.name }}</td>
    <td class="pv3 pr3 bb b--black-20 {% if alarm.is_active %}bg-light-red{% else %} bg-light-green{% endif %} alarm-val-td">{{ alarm.profile_name }}</td>
    <td class="pv3 pr3 bb b--black-20 {% if alarm.is_active %}bg-light-red{% else %} bg-light-green{% endif %} alarm-val-td">{{ alarm.is_active }}</td>
    <td class="pv3 pr3 bb b--black-20 {% if alarm.is_active %}bg-light-red{% else %} bg-light-green{% endif %} alarm-val-td">{{ alarm.created }}</td>
    <td class="pv3 pr3 bb b--black-20 {% if alarm.is_active %}bg-light-red{% else %} bg-light-green{% endif %} alarm-val-td">{{ alarm.message }}</td>
    <td class="pv3 pr3 bb b--black-20 {% if alarm.is_active %}bg-light-red{% else %} bg-light-green{% endif %} alarm-val-td">{{ alarm.alrmtype }}</td>
    <td class="pv3 pr3 bb b--black-20 {% if alarm.is_active %}bg-light-red{% else %} bg-light-green{% endif %} alarm-val-td">{{ alarm.acknowledged }}</td>
    <td class="pv3 pr3 bb b--black-20 {% if alarm.is_active %}bg-light-red{% else %} bg-light-green{% endif %} alarm-val-td">{{ alarm.is_hidden }}</td>

</tr>
{% endfor %}

我个人可能在模型上有一个属性用于设置颜色类，所以你可以说：

<td class="pv3 pr3 bb b--black-20 {{ alarm.css_class }} alarm-val-td">{{ alarm.agent.name }}</td>

编辑 如果您担心模板中过多的 if 会造成难看的视觉效果（不过我会说没关系），您可以使用 with statement 结合 yesno filter 以获得更干净的外观。我尚未对此进行测试，但以下内容可能适用于您的特定情况。如果您关心性能，我认为在一个“与”或多个“如果”之间几乎无所谓，您应该将其超时。我的赌注是多个 if，但是，'with' 在可维护性方面具有优势。

{% with tdalarm_cssclass=alarm.is_active|yesno:"bg-light-red,bg-light-green" %}
    <td class="pv3 pr3 bb b--black-20 {{ tdalarm_cssclass }} alarm-val-td">{{ alarm.agent.name }}</td>
    <td class="pv3 pr3 bb b--black-20 {{ tdalarm_cssclass }} alarm-val-td">{{ alarm.profile_name }}</td>
    <td class="pv3 pr3 bb b--black-20 {{ tdalarm_cssclass }} alarm-val-td">{{ alarm.is_active }}</td>
    <td class="pv3 pr3 bb b--black-20 {{ tdalarm_cssclass }} alarm-val-td">{{ alarm.created }}</td>
    <td class="pv3 pr3 bb b--black-20 {{ tdalarm_cssclass }} alarm-val-td">{{ alarm.message }}</td>
    <td class="pv3 pr3 bb b--black-20 {{ tdalarm_cssclass }} alarm-val-td">{{ alarm.alrmtype }}</td>
    <td class="pv3 pr3 bb b--black-20 {{ tdalarm_cssclass }} alarm-val-td">{{ alarm.acknowledged }}</td>
    <td class="pv3 pr3 bb b--black-20 {{ tdalarm_cssclass }} alarm-val-td">{{ alarm.is_hidden }}</td>
{% endwith %}