引导模式不适用于jinja 2中的“for”

Question

我在flask博客中使用引导模式，将引导模式放在{% for blog in blogs %}部分中，我在模式中传递{{blog.id}}

但是每个模式都显示相同的第一个{{blog.id}}（对于每个模式中的ex1），其中每个模式都应该有其各自博客的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都是唯一的。 就这样