django에서 적절한 링크가 작동하지 않습니다.

Question

좋아, 제목과 설명이있는 그림을 표시하는 앱을 만듭니다. 여기에

{% block content %} 

<!-- MODAL IMAGE - This is the preview --> 
{% if projects %} 

    {% for project in projects %} 
    <div class="col-md-4 "> 
     <div class="grid mask"> 
     <figure> 
     <img class="img-responsive" src="{{ project.preview.url }}" alt=""> 
     <figcaption> 
      <h5>{{ project.title }}</h5> 
      <a data-toggle="modal" href="#modal1" class="btn btn-primary btn-lg">Take a Look</a> 
     </figcaption><!-- /figcaption --> 
     </figure><!-- /figure --> 
     </div><!-- /grid-mask --> 
    </div><!-- /col --> 

    <!-- MODAL DETAIL - This is suppos to show the details --> 
     <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">{{ project.title }}</h4> 
      </div> 
      <div class="modal-body"> 
       <p><img class="img-responsive" src="{{ project.preview.url }}" alt=""></p> 
       <p>Category: {{ project.category }}</p> 
       <p>Detail: {{ project.detail }}</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 
    {% endfor %} 

{% endif %} 
{% endblock %} 

그래서 앱이 작동하고 있으므로 새 프로젝트 이미지를 추가하면 생성 된 모든 프로젝트의 미리보기가 표시됩니다. 그러나 "Take a look"을 클릭하면 팝업 창은 보이지만 이미지와 제목은 항상 첫 번째 이미지와 제목을 나타냅니다. 내 짧은 모달 자세로 모든 첫 번째 이미지와 제목을 참조하십시오.

감사합니다. eak,

Answer 1

당신은 주어진 ID (귀하의 경우 modal1)와 하나의 요소를 가질 수 있습니다. "Take a look"링크는 첫 번째 요소를 modal1 ID로 엽니 다. 요소의 나머지 ID는 무시되기 때문입니다. 각 프로젝트에 대해 고유 한 ID를 렌더링해야합니다 (예 :

... 
<a data-toggle="modal" href="#modal{{ project.pk }}" class="btn btn-primary btn-lg">Take a Look</a> 
... 
<div class="modal fade" id="modal{{ project.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
...