For loop 和 Popup with liquid 和 jekyll

Question

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

特别是，我想创建我的科学出版物列表，每个出版物都有 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}}".

编辑：编辑代码段以使用 forloop.counter 并说明嵌套的 for 循环。

For loop 和 Popup with liquid 和 jekyll

For loop and Popup with liquid and jekyll

html

for-loop

popup

liquid

jekyll