Bootstrap Modal 在 jinja 2 中不支持 "for"

Question

我在我的 Flask 博客中使用 bootstrap 模态，其中将 bootstrap 模态放在 {% for blog in blogs %} 部分中，我在我的模态中传递了 {{blog.id}}。

但每个模态都显示相同的第一个 {{blog.id}}（例如每个模态中的 1），其中每个模态都应具有其各自博客的 ID。

这是代码-

{% for blog in blogs %}
                    <div class="col-md-12">
                        <div class="mu-blog-area">
                            <!-- Title -->
                            <div class="row">
                                <div class="col-md-8">
                                
                                                <h1 class="mu-blog-item-title"><a href="#">{{blog.title}}</a></h1>
                                                <p>{{blog.body}}</p>
                                                <form action="/blog_detail/{{blog.id}}" method="post">
                                                    <button class="mu-blg-readmore-btn" type="submit">Read more <i class="fa fa-long-arrow-right"></i></button>
                                                </form>
                                                <div class="mu-blog-navigation">
                                                    <button class="mu-blog-nav-btn mu-blog-nav-prev ><span class="fa fa-trash-o"></span>Delete Post</button>
                                                    <button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#exampleModalCenter"  >Edit Post<span class="fa fa-edit"></span></button>
                                                </div>
                                            </div>
                                            <!-- Blog Navigation -->
                                        </article>
                                        <!-- End single item -->
                                        
                                        
                                    </div>
                                </div>
                                
                            </div>
                            
                        </div>
                
                    </div>
                            
                    <!-- Button trigger modal -->

                    
                                    <!-- Modal -->
                                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLongTitle">Warning! READ THIS</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            </div>
                                            <div class="modal-body">
                                            If you edit this post then your media content of this blog (photos, videos & audio) will be deleted automaticlly.
                                            </div>
                                            <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                            <form action="/edit_blog/{{blog.id}}" method="post">
                                                <h1>{{blog.id}}</h1>
                                            <button type="submit" class="btn btn-primary">Yes I will edit</button>
                                            </form>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                            
                                
                    {% endfor %}

这里出了什么问题？

Answer 1

我应该为每个模式赋予不同的 ID，以便每个博客模式触发按钮都可以访问它自己的模式。

我应该像这样替换触发按钮代码 -

 <button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#{{blog.id}}exampleModalCenter"  >Edit Post<span class="fa fa-edit"></span></button>

模态 id 是这样的 -

<div class="modal fade" id="{{blog.id}}exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

这是一个非常简单的解决方案。您必须使每个模态的 id 都是唯一的。就是这样。

Bootstrap Modal 在 jinja 2 中不支持 "for"

Bootstrap Modal is not working with "for" in jinja 2

html

python

jinja2

flask

bootstrap-modal