Question

嘿伙计我只是想知道我的for循环如何进入我的图像每次出现在页面上但是在我的弹出模型中它显示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 -->

模型显示最后的循环图像

1 个答案: