如何使用 for 循环和模板模型？

Question

在这里，我对 post_list 模板中显示的所有帖子使用简单的卡片 sn-p。我添加了一个模板模型，所以当我单击特定帖子时，它会向我显示该模型以及我单击的帖子的内容。 使用以下代码，几乎一切正常，但是当我点击任何帖子时，它会显示第一篇帖子的内容。我想在我点击的模型中查看帖子的内容。

{% for post in post_list%}
         <div class="cardbox">
          <div class="cardbox-heading">
           <div class="media m-0">
            <div class="d-flex mr-3">
             <a href="#"><img class="img-responsive img-circle" src="{{post.username.avatar.url}}" alt="User"></a>
            </div>
            <div class="media-body">
             <p class="m-0">{{post.username}}</p>
             <small><span>{{post.create_date|timesince}}</span></small>
            </div>
           </div><!--/ media -->
          </div><!--/ cardbox-heading -->
          
          <div class="cardbox-item">
           <a href="#myModal" data-toggle="modal">
            <img class="img-responsive" src="{{post.image_data.url}}" alt="MaterialImg">
           </a> 
          </div><!--/ cardbox-item -->      
         </div><!--/ cardbox -->
 Modal Section
     =============================================== -->
     <div id="myModal" class="modal fade">
      <div class="modal-dialog">
       <div class="modal-content">
        <div class="modal-body">
        
         <div class="row">
         
          <div class="col-md-8 modal-image">
           <img class="img-responsive" src="{{post.image_data.url}}" alt="Image"/>
          </div><!--/ col-md-8 -->
          <div class="col-md-4 modal-meta">
           <div class="modal-meta-top">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
             <span aria-hidden="true">×</span><span class="sr-only">Close</span>
            </button><!--/ button -->
            <div class="img-poster clearfix">
             <a href="#"><img class="img-responsive img-circle" src="{% static 'assets/img/users/18.jpg'%}" alt="Image"/></a>
             <strong><a href="#">Benjamin</a></strong>
             <span>12 minutes ago</span><br/>
             <a href="#" class="kafe kafe-btn-mint-small"><i class="fa fa-check-square"></i> Following</a>
            </div><!--/ img-poster -->
           </div><!--/ modal-meta-top -->
          </div><!--/ col-md-4 -->
          </div><!--/ row -->
            </div><!--/ modal-body -->
</div><!--/ modal-content -->
      </div><!--/ modal-dialog -->
     </div><!--/ modal -->
 {% endfor %}   

如果需要比告诉我更多的信息，我会用这些信息更新我的问题。

Answer 1

问题是 #myModal 。在 html 中，元素的 id 必须是唯一的，因此请使用 id="myModal{{ post.id }}" 和 <a href="#myModal{{ post.id }}" ... 之类的名称。或{{ post.pk }} 或任何可用的东西