首页 文章

如何用jekyll和javascript / jquery做动态模态弹出窗口

提问于
浏览 次
0

我想知道jekyll是否可以使用以下内容：

  • 有一个网页，您可以在其中单击每个项目 . > Sample image

  • 使用_data文件夹（jekyll）中data.yml文件内的数据循环列出每个项目

  • 单击某个项目时，将出现一个弹出模式，内容应基于所单击的项目 . > Sample Image

  • 这些内容也存储在data.yml文件中

如果可以，当用户单击某个项目时，如何在data.yml中提取数据？

ruby jekyll liquid

1 回答

  • 2

    要做你想要实现的目标，你需要使用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，当你单击链接并释放模态时，它将删除hide类 .

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

相关问题