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')作为选择器时，它将返回具有该ID的每个按钮。

要解决此问题，建议您使用一种模式，并使用onclick函数将相关的详细信息传递给它。这会将用户的电子邮件（或id或其他内容）传递到该函数中。请注意，模态完全在表之外。请注意，我已经将#more id更改为类.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');

}

jade nodejs带有模式的多个按钮

1 个答案: