Question

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

<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 %}

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

是否有更好的方法来实现这一点？

ETA：

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

import matplotlib.pyplot as plt
from mpl_toolkits.axes_grid1.inset_locator import InsetPosition

fig, ax= plt.subplots()

iax = fig.add_axes([0, 0, 1, 2], label="iax")
ip = InsetPosition(ax, [0.4, 0.5, 0.2, 0.2]) #posx, posy, width, height
iax.set_axes_locator(ip)
iax.plot([1,2,4])

iax1 = fig.add_axes([0, 0, 1, 2], label="iax1")
ip = InsetPosition(ax, [0.7, 0.2, 0.2, 0.2]) #posx, posy, width, height
iax1.set_axes_locator(ip)
iax1.plot([1,2,4])

plt.show()

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

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>

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

1 个答案: