如何利用data-*属性为模态框设置mailto及LinkedIn的href属性

没问题，要实现把data-email和data-linkedin的值设置到对应链接的href里，只需要在你现有的jQuery代码中添加几行，利用jQuery的.attr()方法修改链接属性即可。

第一步：优化模态框的链接HTML（可选但推荐） #

为了更精准地选中目标链接，建议给邮箱和LinkedIn的链接分别添加唯一ID：

<!-- 邮箱链接 -->
<a id="email-link" href="mailto:" class="text-carmine">
  <i class="fas fa-envelope-open-text fa-fw"></i> 
  <span id="email">data-email</span> 
</a>

<!-- LinkedIn链接（假设模态框中有这个元素） -->
<a id="linkedin-link" href="#" class="text-blue">
  <i class="fab fa-linkedin fa-fw"></i> 
  <span>LinkedIn Profile</span>
</a>

第二步：修改jQuery代码 #

在你现有的模态框触发代码中，新增设置href的逻辑：

$(document).ready(function() {
  $('#staticBackdrop').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    // 提取所有data-*属性（保留你原有的代码）
    var name = button.data('name')
    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 linkedin = button.data('linkedin') // 新增：提取LinkedIn地址
    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)

    // 新增：设置邮箱链接的href
    modal.find('#email-link').attr('href', 'mailto:' + email)
    // 新增：设置LinkedIn链接的href
    modal.find('#linkedin-link').attr('href', linkedin)
  })
});

关键说明 #

• 邮箱链接：我们把data-email的值拼接在mailto:前缀后面，这样点击链接就能直接唤起邮件客户端。
• LinkedIn链接：直接将data-linkedin的完整地址赋值给链接的href即可，用户点击就能跳转到对应的LinkedIn主页。
• 如果不想给链接加ID，也可以用属性选择器定位，比如邮箱链接可以用modal.find('a[href^="mailto:"]')，但使用ID的方式更精准，避免页面中其他同类链接被误修改。

内容的提问来源于stack exchange，提问作者Matthew Barraud