Jade nodejs 多个带有模态的按钮

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 

Jquery

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

Answer 1

它显示每个模式，因为您拥有的用户有多少 #more 按钮。 如果你遵循JavaScript/HTML最佳实践，id"more"应该用于一个且只有一个元素，但正如你所看到的，这不是一个严格执行的规则。 当您使用$('#more')作为选择器时，它会返回具有该 id 的每个按钮。

为了解决这个问题，我建议您使用一种模式，并使用onclick函数将相关详细信息传递到其中。 这会将用户的电子邮件(或 id 或其他任何东西(传递到函数中。 请注意，模态完全在表之外。 请注意，我已将#moreid更改为类.more作为类对多个元素进行分组的正确方法。

table
each user in users
tr
td= user.email
td
.ui.basic.blue.button.more(onclick='showMore(' + user.email + ')') More

.ui.mini.modal.myModal#theModal
i.close.icon
.header
span#modalHeader
.content
span#modalContent
.actions
.ui.positive.right.labeled.icon.button Yep!
i.checkmark.icon

然后，脚本会将内容传递到模态中并显示它：

function showMore(email){
$('#modalHeader').html(email);
$('#modalContent').html(email);
$('.ui.modal.myModal').modal('show');
}

如果你想变得非常棘手，你可以将整个对象传递到函数调用中，然后showMore函数可以使用任何属性：

.ui.basic.blue.button#more(onclick='showMore(' + JSON.stringify(user) + ')') More

然后，该函数将如下所示：

function showMore(user){
$('#modalHeader').html(user.name);
$('#modalContent').html(user.email);
$('.ui.modal.myModal').modal('show');
}