html-如何在jinja循环中显示图像onclick？

我是 jinja 的新手，需要在单击附件名称时将循环内的“附件”变量解析为呈现的部分 HTML 模板。

部分页面包含使用 img 标签显示此附件的潜水 HTML。附件变量包括文件名。

profile.html

<div class="tab-pane fade" id="attachment-tab-pane" role="tabpanel" aria-labelledby="attachment-tab" tabindex="0">

    <a class="btn" role="button" id="btn-add-attachment" data-bs-toggle="modal" data-bs-target="#upload-attachment-modal">+ Add Attachment</a>

    <div id="attachments" class="p-4">

        <div class="row gx-3">

            {% for attachment in attachments %}

                <div class="col-12 col-lg-6">

                    <div class="d-flex justify-content-between attachment-item">

                            <div class="start"><i class="fas fa-file-alt me-3"></i>

<span type="button" class="popos_img" id="button_{{attachment}}">{{attachment}}</span></div>

                        <div class="end"><i class="fas fa-eye me-2"></i>

                            <i class="fas fa-trash me-2"></i><i class="fas fa-cloud-download-alt"></i></div>           

                    </div>

                </div>

<!-- Modal -->

<div hidden class="modal fade"

    id="view_attachment_modal"

    tabindex="-1"

    role="dialog"

    aria-labelledby="exampleModalLabel"

    aria-hidden="true" style="text-align: center;">

    <div class="modal-dialog" role="document" style="margin: auto;text-align: center;">

        <div class="modal-content" style="display:table;text-align: center;">

            <!-- Add image inside the body of modal -->

            <div class="modal-body" style="text-align: center;">

                <img id="image" src="/assets/img/{{attachment}}" alt="Click an attachment" />

            </div>

            <div class="modal-footer">

                <button type="button"

                    class="btn btn-secondary"

                    data-dismiss="modal">

                    Close

            </button>

            </div>

        </div>

    </div>

</div>

            {% endfor %}

        </div>

    </div>

</div>

发生的事情是只有一个附件在点击所有附件时一直显示。

我所期望的是当单击任何附件名称时它会显示出来。

我确信有什么东西不见了。提前致谢

编辑

我试过这个 JQuery Snippet 但它没有用，它有什么问题？

<script type="text/javascript">

    $(document).ready(function() {          

        $('.button').each(function(){

            $(this).click(function(){

                $('#view_attachment_modal'+$(this).attr('attachment')).toggle();

            });

        });

    });

</script>