如何让模态对话框在哈巴狗迭代中发送正确的对象？

Question

在我的哈巴狗文件中有这段代码

each doc, i in docs
      li.list-group-item
        a.btn.btn-default(href='/docs/edit/'+doc._id)=doc.docname
        b &nbsp;
        button.btn.btn-primary.pull-right(type='button' data-toggle='modal' data-target='#login-modal') Share
        #login-modal.modal(role='dialog')
            .modal-dialog
                .modal-content
                    .modal-header
                        h2 Invite users
                        button.close(type='button' data-dismiss='modal') &times;
                    .modal-body
                        form(name='form' onsubmit='put();' method='POST', action='/docs/share/'+doc._id)
                            #form-group
                                label Who would you like to share it with? (Username)
                                input.form-control(name='userfriend' type='text')
                            input.btn.btn-primary(type='submit' value='Submit')
                    .modal-footer
                        button.btn.btn-primary(type='button' data-dismiss='modal') Close

问题是，尽管共享按钮确实将我带到 docs/share/:id，但 id 始终是列表中第一个文档的 id。这很奇怪，因为我将 doc._id 属性用于另一个按钮并且该按钮有效。模态按钮是否有什么特别之处不允许您使用第一个条目以外的 ID？

为了更清楚，假设我的文档中有两个条目：A 和 B。它们的 ID 分别是 a 和 b。 A 的分享按钮和 B 的分享按钮向 docs/share/a 发送查询，而 B 的分享按钮应该向 docs/share/b 发送查询。即使有更多文档，共享按钮也始终将其发送到列表中的第一个。删除列表中的第一个后，它将向列表中新的第一个发送查询。有想法该怎么解决这个吗？对于背景，我正在使用 NodeJS 和 Mongoose 与之协调，但我认为这不是必需的，因为其他网页可以很好地使用 doc._id 属性，它只是模式按钮似乎只有doc._id 列表中第一个文档。

Answer 1

您的问题是页面上有多个具有相同 ID 的模式。此行在每个循环内：

#login-modal.modal(role='dialog')

这个 id 没有什么独特之处，所以当你通过 id 调用你的模式时，它只会使用它找到的第一个。你可能已经在你的页面上生成了二十个模态框，但它们都有 id login-modal.

更改该行以包含文档 ID，然后确保将其添加到模态调用中，无论该代码位于何处。

.modal(id= ('login-modal-' + doc._id) role='dialog')

如何让模态对话框在哈巴狗迭代中发送正确的对象？

How to get modal dialog to send correct object in pug iteration?

foreach

bootstrap-modal

bootstrap-4

pug