通过 jinja 和 js 循环创建不同颜色的 div

Question

我在我的模板中使用 jinja 和 javascript 创建了几行 100 个框，其中一些框是一种颜色，另一些是另一种颜色，具体取决于数据行中的数字。例如，如果我的电子表格中的一行包含以下内容：

year  men  women
1988  60    40

我页面上的那一行是年份，然后是 60 个绿色框（# of men）和 40 个黄色框（# of men）。我目前正在使用 jinja 循环执行此操作，但它只会吐出一排不同颜色的框。

{% for row in years %}

<script>
    var htmlElements = "";
    var container = document.getElementById("boxes");
    for (var i = 0; i < {{ row.men }}; i++) {
        htmlElements += '<div class="men"></div>';
    }
    for (var i = 0; i < {{ row.women }}; i++) {
        htmlElements += '<div class="women"></div>';
    }
    container.innerHTML = htmlElements;
</script>

<div class="row box-row">
    <div class="two columns">
        <p id="{{ row.id }}" class="year-text">{{ row.year }}</p>
    </div>
    <div id="boxes" class="ten columns"></div>
</div>
<div class="row">
    <div class="six columns offset-by-five">
        <a href="#" class="scrollToTop">Jump To Top</a>
    </div>
</div>

{% endfor %}

此代码在页面上生成所有年份，但仅生成不同颜色框的第一行。我已经检查以确保我的数据的标题行与上面脚本标记中的内容相匹配。我不确定我是否在脚本中正确使用了 jinja 变量。任何帮助表示赞赏！

Answer 1

您当然可以在 jinja 中完成这一切。您可能需要稍微调整一下以使其与您尚未发布的代码一起使用，但这是我想出的：

{% for row in years %}

    <div class="container">
    {% for male_boxes in row.men %}
        <div class="men"></div>
    {% endfor %}
    {% for female_boxes in row.women %}
        <div class="women"></div>
    {% endfor %}
    </div>

    <div class="row box-row">
        <div class="two columns">
            <p id="{{ row.id }}" class="year-text">{{ row.year }}</p>
        </div>
        <div class="boxes" class="ten columns"></div>
    </div>
    <div class="row">
        <div class="six columns offset-by-five">
            <a href="#" class="scrollToTop">Jump To Top</a>
        </div>
    </div>

{% endfor %}

注意：我将您的 <div> ids 之一更改为 class，因为您是在循环内创建它，这将创建多个带有 id 的元素，而这将不起作用HTML。小心那些。