如何在循环中的每次迭代中包含翡翠模板？答案

【问题标题】：How to include jade template with each iteration in a loop?如何在循环中的每次迭代中包含翡翠模板？
【发布时间】：2018-08-03 19:31:34
【问题描述】：

我试图在循环中的每次迭代中包含相同的翡翠模板，这样如果用户点击一个按钮，无论哪个迭代，它都会提供相同的模板。这是我正在创建的博客引擎。我想为每个帖子包含一个deletePostModal.jade 模板，当在特定帖子上单击按钮时，会出现带有删除该帖子的选项的模式。模态仅在第一个帖子上单击按钮时出现！这是我的blog.jade 代码：

      each post in postsList
        div#post-container(class='container-fluid')
          .row
            .col-md-6
              a(href='/blog/posts/#{post._id}')  
                h2 #{post.title}
                h4 Date and Time posting
                img#post-img(src=urlList[i])
            .col-md-1.offset-md-5
              if isAdmin
                include ./includes/deletePostModal.jade // Template I'm trying to include                   
                button.xxx#deletePostBtn X // Button to add template
          .row
            .col-md-12
              div#content-text-container
                p(id='content-text') 
                  | #{post.content}
          - i++

我的deletePostModal.jade 代码：

#deletePostModal.modal
  // Modal content
  .modal-content
    .modal-header
      span.closeDeletePost ×
      h2 Modal Header
    .modal-body
      p Are you sure you want to delete post?
    .modal-footer
      a(href="api/blog/posts/#{post._id}/delete")
        button Yes
      button.closeDeletePost No

还有我的 deletePostModal.js 代码：

// Get the modal
var deletePostModal = document.getElementById('deletePostModal');

// Get the button that opens the modal
var deletePostBtn = document.getElementById("deletePostBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeDeletePost")[0];

// When the user clicks the button, open the modal
deletePostBtn.onclick = function() {
      deletePostModal.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
      deletePostModal.style.display = "none";
};

这是我完成博客所需的最后一步，我已经努力了好几个小时。感谢您的帮助！

【问题讨论】：

您是否正在使用相同的id 创建多个按钮？如果是这样，那可能是个问题。 var deletePostBtn = document.getElementById("deletePostBtn");

标签： javascript node.js api express pug

【解决方案1】：

我猜这是因为您有多个按钮具有相同的id。

在您循环浏览帖子时创建于button.xxx#deletePostBtn。

那么当你通过ID获取元素时

// Get the button that opens the modal var deletePostBtn = document.getElementById("deletePostBtn");

它只适用于第一个帖子，因为它就是它抓取的那个。

尝试为每个按钮添加一个唯一的 ID。使用帖子 ID 或类似的东西。

【讨论】：