帮助模态和按钮与 for 循环 (语义 UI)

Question

>我在for循环中有多个按钮。我只想在单击按钮时显示一个模态，但现在当我单击按钮时，它会显示每个按钮的所有模态。我想为每个按钮显示一个模态。如何解决问题？

each user in users
tr
td= user.email
td
.ui.basic.blue.button#more More
.ui.mini.modal.myModal
i.close.icon
.header
| #{user.email}
.content
|#{user.email}  
.actions
.ui.positive.right.labeled.icon.button
| Yep!
i.checkmark.icon 

杰奎里

$('#more').click(function(){
$('.ui.modal.myModal').modal({
}).modal('show');
});

Answer 1

正如 Taplar 的回答所指出的，id 属性在 DOM 中是唯一的。

另一种方法是使用循环中的类或数据属性将每个按钮绑定到其模态。您可以在 pug 中获取循环的索引，并使用它来创建唯一的类或数据属性。

each user, index in users
tr
td= user.email
td
// add a unique data attribute serialized with the id
.ui.basic.blue.button(data-modal= 'modal-' + index) More
.ui.mini.modal.myModal(data-modal= 'modal-' + index)
i.close.icon
.header
| #{user.email}
.content
| #{user.email}  
.actions
.ui.positive.right.labeled.icon.button
| Yep!
i.checkmark.icon

这允许你拥有更高性能的jQuery，避免依赖DOM遍历。

$('.button[data-modal]').click(function() {
$('.modal[data-modal=' + $(this).attr('data-modal') + ']').modal().modal('show');
})

Answer 2

.ui.basic.blue.button#more More

ID在 DOM 中应该是唯一的(ID 在整个页面中必须是唯一的吗？(。 如果需要重复标识符，则反映类。 首先更改定义以使用类。

.ui.basic.blue.button.more More

然后，您应该能够更改单击处理程序以执行上下文查找，以查找与该按钮关联的模式。

$('.more').click(function(){
$(this).closest('td').find('.ui.modal.myModal').modal({
}).modal('show');
});

此逻辑查找您单击的按钮的父 td，然后在其中查找嵌套模式。 如果模态是more元素的子元素，则可以只执行查找，而不是closest()步骤。