模型顯示最後一個循環圖像

Question

嘿傢伙我只是想知道如何進入我的循環我的圖像顯示在頁面上的每一次，但在我的彈出模型它顯示了for循環給出的每個模型的最後一個圖像。我甚至試圖製作一個不同的html，它顯示了完整視圖的細節以查看它顯示的圖片，並且它仍然顯示for循環給出的最後一張圖片，這是最後張貼的圖片。

{% extends 'navbar.html'%} 

{% load staticfiles%} 

{% block styles %} 
    <link rel="stylesheet" type="text/css" href="{% static 'css/accounts/profile.css' %}" /> 
{% endblock %} 

{% block content %} 

<div class="row"> 
    <div class="col-lg-4 col-md-6 col-xs-12" style="background-color:red"> 
    <h1>Profile of {{user}}</h1> 
    </div> 
    <div class="col-lg-4 col-md-6 col-xs-12"> 
    {% for post in posts%} 
    <div class="thumbnail" style="background-color: yellow"> 
     <img src="{{post.image.url}}" class="image" data-toggle="modal" data-target="#myModal"> 
     <div class="middle"> 
     <div class="text">{{post.title}}</div> 
     </div> 
    </div> 

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h1 class="modal-title" id="myModalLabel"><a href="{% url 'posts:detail' post.slug%}">{{post.title}}</a></h1> 
      <h6>Posted: {{ post.pub_date| timesince}}</h6> by <a href="{% url 'posts:userpost' post.author.id%}">{{post.author.username}}</a> 
      </div> 
      <div class="modal-body"> 
      <div class="thumbnail"> 
       <img src="{{post.image.url}}" class="image" data-toggle="modal" data-target="#myModal"> 
      </div> 
      <p>{{post.description|linebreaks|truncatechars:120}}</p> 
      <p><a href="{% url 'posts:detail' post.slug%}" class="btn btn-primary" role="button">View</a></p> 
      </div> 
     </div> 
     </div> 
    </div> 

    {% endfor %} 
    </div> 
</div> 


{% endblock %} 

Answer 1

那是因爲你有data-target="#myModal"和下面你有<div class="modal fade" id="myModal"...爲每個圖像。

所以，每個div都有相同的id。爲了工作，您應該爲每個圖像製作獨特的圖像。就像這樣：

data-target="#myModal-{{ forloop.counter }}"> <!-- this will become #myModal-1 #myModal-2 #myModal-3 etc --> 

和

<div class="modal fade" id="myModal-{{ forloop.counter }}" ... <!-- this will become myModal-1 myModal-2 myModal-3 etc -->