Question

使用烧瓶和引导程序4我正在使用批处理过滤器，为每3个项目创建一个新行，就像这样

{% for row in teams|batch(3) %}
    <div class="row">
        {% for value,participant in row %}
            <div class="col stackem mb-2">
            <div class="text-center" id="participant">{{ participant }}</div>
            <div class="text-center mb-2"><button type="button" class="btn btn-secondary btn-sm custom" data-toggle="modal" data-target="#MyModal" id ='{{ loop.index }}'>{{ value }}</button></div>
            </div>
        {% endfor %}
    </div>
{% endfor %}

然后，我（正在尝试）通过id吸引参与者

participant = document.getElementById("participant").textContent;

问题是，无论我单击哪个div，我都会一直只获得列表中的第一个参与者...我试图通过使id类似于按钮来引用循环...

id ='{{ loop.index }}'

但是由于批处理过滤器，我仍然只得到1,2或3作为值。如何获得各个参与者的文字？我在想我必须参考团队（因为它包含所有参与者），但是由于批次筛选器只给我1,2或3，我不知道如何获取团队中每个元素的索引/位置？ ??

Answer 1

您的participant ID应该是唯一的。试试这个：

{% for row in teams|batch(3) %}
    <div class="row">
        {% for value,participant in row %}
            <div class="col stackem mb-2">
            <div class="text-center" id="participant-{{loop.index}}">{{ participant }}</div>
            <div class="text-center mb-2"><button type="button" class="btn btn-secondary btn-sm custom" data-toggle="modal" data-target="#MyModal" id ='{{ loop.index }}'>{{ value }}</button></div>
            </div>
        {% endfor %}
    </div>
{% endfor %}

如果您想吸引所有参与者，则可能要使用document.getElementsByClassName并将participant添加到您的课程属性中。

Jinja2批处理过滤器-如何获取各种div元素的文本

1 个答案: