如何使用 jekyll 和 javascript/jquery 进行动态模态弹出窗口答案

【问题标题】：How to do a dynamic Modal Pop-up with jekyll & javascript/jquery如何使用 jekyll 和 javascript/jquery 进行动态模态弹出窗口
【发布时间】：2016-01-31 08:28:27
【问题描述】：

我想知道 jekyll 是否可以实现以下功能：

一个网页有一个列表，您可以在其中单击每个项目。 > Sample image
使用 _data 文件夹 (jekyll) 中的 data.yml 文件中的数据通过循环列出每个项目
当一个项目被点击时，会出现一个弹出模式，内容应该基于点击的项目。 > Sample Image
这些内容也存储在data.yml文件中

如果可能的话，当用户点击一个项目时，如何提取 data.yml 中的数据？

【问题讨论】：

是的。您需要使用for 循环，例如：{% for data in site.data %}... html markup... {% endfor %}。您应该在此处提供一些代码块以及您已有的代码，以便人们可以通过编辑您的代码来帮助您。我们通常不会为您提供新代码，我们会根据您的需要帮助您修改自己的代码。如需更好的解释，请check this out.
使用 jekyll 应该不是问题。你知道如何在没有 jekyll 的情况下做到这一点吗？如果不是，那么这就是你真正的问题。一旦你知道如何去做，插入数据文件应该很容易。也许检查引导程序以了解他们的操作方式。

标签： ruby jekyll liquid

【解决方案1】：

要完成您想要实现的目标，您需要使用 for 循环。让我们调用您的数据文件 members.yml 并将其放在 _data 目录中。

假设你会有类似的内容

- name: John
  music: Rock

- name: Parker 
  music: Hip-Hop

- name: Lissie
  music: Jazz

现在我们可以在 html 中引用它

<ul>
  {% for member in site.data.members %}
    <li>
      <a href="#" class="show-message">
        {{ member.name }}, click me to see something
      </a>
      <div class="modal hide"> My favorite music is {{ member.music}}</div>
    </li>
  {% endfor %}
</ul>

这将生成一个列表。默认情况下，class hide 会隐藏我们的模态框，您可以按照自己喜欢的方式设置模态框的样式。这是一些 jquery，当您单击链接并释放模式时，它将删除隐藏类。

$(document).ready(function () {
      $("a.show-message").on("click", function () {
          console.log("clicked");
          $(this).next().removeClass("hide");
      });
});

【讨论】：