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

.ui.basic.blue.button#more More

ID在DOM（Does ID have to be unique in the whole page?）中应该是唯一的。如果您需要重复一个标识符，则表示一个类。首先将您的定义更改为使用类。

.ui.basic.blue.button.more More

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

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

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

Answer 2

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

另一种方法是使用循环内的类或数据属性将每个按钮绑定到其模式。您可以在哈巴狗get the index of the loop中使用它来创建唯一的类或数据属性。

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');
})

使用for循环帮助模态和按钮（Semantic Ui）

2 个答案: