有没有办法更有效地更改模式中的内容？

Question

我正在构建一个投资组合网站，并且正在处理 work/project 部分。现在，我有一堆打开模态的缩略图，但我希望模态的内容根据按下的缩略图改变内容，而不必继续复制模态代码。

这是缩略图的代码：

<div class="thumb-container">
    {% for project in site.data.settings.projects %}
        <a href="#myModal" data-toggle="modal" class="thumb-unit" style="background-image: url(assets/img/work/{{ project.folder }}/thumb.png);">
            <div class="thumb-overlay">
                <strong>{{ project.name }}</strong>
                <!--<div class="zoom-icon"></div>-->
            </div>
        </a>
    {% endfor %}
</div>

这是模态代码。它实际上不起作用，因为当我单击缩略图时，会弹出每个项目的模式，而不仅仅是与缩略图对应的模式。我知道这是因为它是一个循环，我只是想展示我所拥有的。

<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    {% for project in site.data.settings.projects %}
      <div class="modal-dialog">
        <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>
            <h4 class="modal-title" id="myModalLabel">{{ project.name }}</h4>
          </div>
          <div class="modal-body">
            {% include {{project.file}} %}
          </div>
        </div>
      </div>
    </div>

所以，我认为问题在于我不知道如何以某种方式告诉模态框要显示哪些内容。如果有人能帮助我，那就太好了。

Answer 1

最简单的解决方案是为每个项目设置一个模式：

使用 forloop.index

为每个按钮设置不同的目标 ID

<div class="thumb-container">
  {% for project in site.data.settings.projects %}
    <a href="#myModal{{ forloop.index }}" data-toggle="modal" class="thumb-unit" style="background-image: url(assets/img/work/{{ project.folder }}/thumb.png);">

为每个项目创建一个模态，并使用 forloop.index

给他一个唯一的 ID

<!-- Modals -->
  {% for project in site.data.settings.projects %}
    <div class="modal fade" id="myModal{{ forloop.index }}" ...

您当然可以通过对所有项目仅使用一个模态来节省一些 html 代码（参见 bootstrap 文档 here）。但是，我认为它增加了无用的复杂性。