javascript - 使用 data-* 属性将数据发送到 modal

问题描述

我在表格的行中设置了一个数据电子邮件属性（以及其他属性）。我的用户可以单击每一行以打开模式以显示更多信息。

<tr data-toggle="modal"
  data-id="1"
  data-name="Their name"
  data-role="Consultant"
  data-position="N/A"
  data-department="PMU"
  data-office="None"
  data-telephone="01234 567890 ext 123"
  data-email="their email address"
  data-linkedin="linkedin address"
  data-bio="Blah Blah Blah"
data-target="#staticBackdrop">
  <td class="td-center" style="width: 6%;">
    <img src="img/user.png" class="rounded-circle" />
  </td>
  <td>
    Full Name
  </td>
  <td class="td-center">
    Position
  </td>
  <td class="td-center">
    Role
  </td>
  <td class="td-center">
    PMU
  </td>
  <td class="td-center">
    None
  </td>
</tr>

我正在使用 data-* 属性来填充模态中的信息，效果非常好。我想做的是在href中设置电子邮件地址。我正在使用以下 jquery/javascript 替换 spans 的内容，以向用户显示模态中的信息。

$(document).ready(function() {
  $('#staticBackdrop').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var name = button.data('name') // Extract info from data-* attributes
    var role = button.data('role')
    var position = button.data('position')
    var department = button.data('department')
    var office = button.data('office')
    var telephone = button.data('telephone')
    var email = button.data('email')
    var bio = button.data('bio')
    var modal = $(this)
    modal.find('#name').text(name)
    modal.find('#role').text(role)
    modal.find('#position').text(position)
    modal.find('#department').text(department)
    modal.find('#office').text(office)
    modal.find('#telephone').text(telephone)
    modal.find('#email').text(email)
    modal.find('#bio').text(bio)
  })
});

<span id="bio">data-bio</span> etc...

我不知道如何获取电子邮件和链接地址并将它们添加到 href 中，如下所示：

<a 
 href="mailto:INSERT DATA-EMAIL HERE" 
 class="text-carmine"><i class="fas fa-envelope-open-text fa-fw"></i>
 <span id="email">data-email</span>
</a>

标签： javascriptjquery

javascript - 使用 data-* 属性将数据发送到 modal - 使用该属性设置 href

问题描述

解决方案

推荐阅读