For loop 和 Popup 与液体和 jekyll

Question

我想创建一个带有 for 循环的模式弹出列表，每个弹出窗口显示不同的文本。 该站点是使用带有 Liquid 模板引擎的 Jekyll 创建的。

特别是，我想为我的科学出版物创建一个列表，每个都有 2 个图标：一个用于 bibtex 条目，一个用于摘要。此信息存储在 yaml 文件中。

我正在关注这个simple tutorial for modal popups。

弹出窗口有效，但所有条目的文本都相同。如何生成独立的模态弹窗？

这是html

{% for papers in papers %}
  {% for content in paper.papers %}
    <a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#modal"></i></a>
    <div class="modal" id="modal">
      <div class="modal-header">
        <div class="title">{{content.name}}</div>
        <button data-close-button class="close-button">&times;</button>
      </div>

      <!-- text to display -->
      <div class="modal-body">{{content.text}}</div>
    </div>
  {% endfor %}
{% endfor %}

这是 Javascript 代码：

const openModalIcons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalIcons.forEach(icon => {
    icon.addEventListener('click', () => {
        const modal = document.querySelector(icon.dataset.modalTarget)
        openModal(modal)
    })
})

function openModal(modal) {
    if (modal == null) return
    modal.classList.add('active')
    overlay.classList.add('active')
}

closeModalButtons.forEach(button => {
    button.addEventListener('click', () => {
        const modal = button.closest('.modal')
        closeModal(modal)
    })
})

function closeModal(modal) {
    if (modal == null) return
    modal.classList.remove('active')
    overlay.classList.remove('active')
}

overlay.addEventListener('click', () => {
    const modals = document.querySelectorAll('.modal.active')
    modals.forEach(modal => {
        closeModal(modal)
    })
})

Answer 1

问题是你所有的模态都有id="modal"，所以选择器#modal 可能总是选择第一个。 id 属性在整个文档中应该是唯一的。

这样的事情应该可以工作：

{% for papers in papers %}
  {% for content in paper.papers %}
    <a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}"></i></a>
    <div class="modal" id="paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}">
      <div class="modal-header">
        <div class="title">{{content.name}}</div>
        <button data-close-button class="close-button">&times;</button>
      </div>

      <!-- text to display -->
      <div class="modal-body">{{content.text}}</div>
    </div>
  {% endfor %}
{% endfor %}

除了使用 for 循环计数器，您还可以使用论文名称作为 ID（只要它是唯一的），例如id="paperModal_{{content.name | slugify}}".

编辑：编辑 sn-p 以使用 forloop.counter 并考虑嵌套 for 循环。