如何从点击事件处理器中获取ID？模态框选择器ID实现方案

我来帮你一步步搞定这两个问题，结合你现有的代码来调整优化：

1. 从点击事件中获取元素ID #

你生成的每个员工卡片都带有id="i"（i是循环索引），等你把拼接好的newHTML插入到页面DOM后，就可以给这些.container元素绑定点击事件，通过$(this).attr('id')轻松拿到当前点击卡片的ID：

// 假设你把生成的员工卡片插入到页面的#employee-list容器中
$('#employee-list').html(newHTML);

// 给所有员工卡片绑定点击事件
$('.container').on('click', function() {
  const employeeId = $(this).attr('id');
  console.log('当前点击的员工ID：', employeeId);
  
  // 这里调用模态框处理逻辑，把拿到的ID传进去
  openEmployeeModal(employeeId);
});

2. 用ID关联模态框并控制显示属性 #

针对模态框的需求，我给你两种实用方案：

方案一：为每个员工生成对应ID的专属模态框 #

在循环生成员工卡片的同时，同步生成对应ID的模态框（比如ID设为modal-${i}），点击卡片时直接通过ID选择器定位到对应的模态框：

let newHTML = '';
let modalHTML = '';
$.each(employees, function (i, employee) {
  // 生成员工卡片（这里改用模板字符串，避免转义符的麻烦）
  newHTML += `<div id="${i}" class="container">`;
  newHTML += '<div class="employee-img-container">';
  newHTML += `<img class="employee-img" src="${employee.picture.large}" alt="员工头像">`;
  // 补充卡片其他内容...
  newHTML += '</div></div>';

  // 生成对应ID的模态框，默认隐藏
  modalHTML += `<div id="modal-${i}" class="modal" style="display: none;">`;
  modalHTML += `<h3>${employee.name.first} ${employee.name.last}</h3>`;
  // 补充模态框其他内容，比如邮箱、电话等
  modalHTML += `<p>邮箱：${employee.email}</p>`;
  modalHTML += '</div>';
});

// 把卡片和模态框都插入到页面DOM中
$('#employee-list').html(newHTML);
$('#modals-wrapper').html(modalHTML);

// 点击卡片时显示对应模态框
$('.container').on('click', function() {
  const employeeId = $(this).attr('id');
  // 先隐藏所有模态框，再显示当前对应的
  $('.modal').hide();
  $(`#modal-${employeeId}`).show();
});

方案二：使用单个通用模态框，动态更新内容 #

如果不想生成多个模态框，也可以只用一个通用模态框，点击卡片时根据ID获取对应员工数据，更新模态框内容后再显示：

<!-- 页面中先提前放好一个隐藏的通用模态框 -->
<div id="general-modal" class="modal" style="display: none;">
  <h3 id="modal-employee-name"></h3>
  <img id="modal-employee-img" src="" alt="员工头像">
  <p id="modal-employee-email"></p>
  <!-- 其他需要展示的内容占位 -->
</div>

// 点击事件处理逻辑
$('.container').on('click', function() {
  const employeeId = $(this).attr('id');
  // 从之前保存的employees数组中拿到对应员工的数据
  const targetEmployee = employees[employeeId];

  // 更新通用模态框的内容
  $('#modal-employee-name').text(`${targetEmployee.name.first} ${targetEmployee.name.last}`);
  $('#modal-employee-img').attr('src', targetEmployee.picture.large);
  $('#modal-employee-email').text(targetEmployee.email);
  // 其他内容按需更新...

  // 显示模态框
  $('#general-modal').show();
});

小提醒 #

• 用ES6的模板字符串（`）拼接HTML会比传统字符串拼接更清晰，还能避免你代码里<这类转义符的麻烦；
• 如果后续会动态新增员工卡片，建议用事件委托绑定点击事件，比如$('#employee-list').on('click', '.container', function() { ... })，这样新添加的卡片也能触发点击事件。

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