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 %}

因此应用程序正常运行，当我添加新项目图像时，它会显示所有已创建项目的预览。但是，当我点击“看一看”时，它会显示弹出窗口，但图像和标题总是引用第一个图像和标题。在我的模态细节中，请参考第一个图像和标题。

谢谢。哎呀，

Answer 1

您只能拥有一个具有给定ID的元素（在您的情况下为modal1）。所有“查看”链接都会打开带有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">
...

正确的链接无法在django中工作

1 个答案: