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

Question

我正在建立投资组合网站，而且我正在开展工作/项目部分。现在，我有一堆缩略图打开了一个模态，但我希望模态的内容根据按下的缩略图来改变内容，而不必不断重复模态代码。

这是缩略图的代码：

<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）。但是，我认为它增加了无用的复杂性。